萬惡的前端內存泄漏及萬善的解決方案

時間 2021-01-05

標籤 javascript html vue java node webpack git github web vue-cli 欄目 JavaScript 简体版

原文原文鏈接

本文在github作了收錄 github.com/Michael-lzg…javascript

最近收到測試人員的反饋說咱們開發的頁面偶現卡死，點擊無反應的狀況，特別是打開頁面較久的時候發生機率較高。打開任務管理器，看到內存佔有率已經很高了，初步判斷可能存在內存泄漏的狀況。下面排查內存泄漏的緣由。html

系統進程再也不用到的內存，沒有及時釋放，就叫作內存泄漏（memory leak）。當內存佔用愈來愈高，輕則影響系統性能，重則致使進程崩潰。Chrome 限制了瀏覽器所能使用的內存極限（64 位爲 1.4GB，32 位爲 1.0GB）vue

引發內存泄漏的緣由

一、意外的全局變量

因爲 js 對未聲明變量的處理方式是在全局對象上建立該變量的引用。若是在瀏覽器中，全局對象就是 window 對象。變量在窗口關閉或從新刷新頁面以前都不會被釋放，若是未聲明的變量緩存大量的數據，就會致使內存泄露。java

未聲明變量

function fn() {
  a = 'global variable'
}
fn()

使用 this 建立的變量(this 的指向是 window)。

function fn() {
  this.a = 'global variable'
}
fn()

解決方法：node

避免建立全局變量
使用嚴格模式,在 JavaScript 文件頭部或者函數的頂部加上 use strict。

二、閉包引發的內存泄漏

緣由：閉包能夠讀取函數內部的變量，而後讓這些變量始終保存在內存中。若是在使用結束後沒有將局部變量清除，就可能致使內存泄露。webpack

function fn () {
  var a = "I'm a";
  return function () {
    console.log(a);
  };
}

解決：將事件處理函數定義在外部，解除閉包，或者在定義事件處理函數的外部函數中。git

好比：在循環中的函數表達式，能複用最好放到循環外面。github

// bad
for (var k = 0; k < 10; k++) {
  var t = function (a) {
    // 建立了10次  函數對象。
    console.log(a)
  }
  t(k)
}

// good
function t(a) {
  console.log(a)
}
for (var k = 0; k < 10; k++) {
  t(k)
}
t = null

三、沒有清理的 DOM 元素引用

緣由：雖然別的地方刪除了，可是對象中還存在對 dom 的引用。web

// 在對象中引用DOM
var elements = {
  btn: document.getElementById('btn'),
}
function doSomeThing() {
  elements.btn.click()
}

function removeBtn() {
  // 將body中的btn移除, 也就是移除 DOM樹中的btn
  document.body.removeChild(document.getElementById('button'))
  // 可是此時全局變量elements仍是保留了對btn的引用, btn仍是存在於內存中,不能被GC回收
}

解決方法：手動刪除，elements.btn = null。vue-cli

四、被遺忘的定時器或者回調

定時器中有 dom 的引用，即便 dom 刪除了，可是定時器還在，因此內存中仍是有這個 dom。

// 定時器
var serverData = loadData()
setInterval(function () {
  var renderer = document.getElementById('renderer')
  if (renderer) {
    renderer.innerHTML = JSON.stringify(serverData)
  }
}, 5000)

// 觀察者模式
var btn = document.getElementById('btn')
function onClick(element) {
  element.innerHTMl = "I'm innerHTML"
}
btn.addEventListener('click', onClick)

解決方法：

手動刪除定時器和 dom。
removeEventListener 移除事件監聽

vue 中容易出現內存泄露的幾種狀況

在 Vue SPA 開發應用，那麼就更要小心內存泄漏的問題。由於在 SPA 的設計中，用戶使用它時是不須要刷新瀏覽器的，因此 JavaScript 應用須要自行清理組件來確保垃圾回收以預期的方式生效。所以開發過程當中，你須要時刻警戒內存泄漏的問題。

一、全局變量形成的內存泄露

聲明的全局變量在切換頁面的時候沒有清空

<template>
  <div id="home">這裏是首頁</div>
</template>

<script> 
export default {
    mounted() {
      window.test = {
        // 此處在全局window對象中引用了本頁面的dom對象
        name: 'home',
        node: document.getElementById('home'),
      }
    },
  } 
</script>

解決方案:在頁面卸載的時候順便處理掉該引用。

destroyed () {
  window.test = null // 頁面卸載的時候解除引用
 }

二、監聽在 window/body 等事件沒有解綁

特別注意 window.addEventListener 之類的時間監聽

<template>
<div id="home">這裏是首頁</div>
</template>

<script> 
 export default {
     mounted () {
      window.addEventListener('resize', this.func) //window對象引用了home頁面的方法
  }
} 
</script>

解決方法:在頁面銷燬的時候，順便解除引用，釋放內存

mounted () {
  window.addEventListener('resize', this.func)
},
beforeDestroy () {
  window.removeEventListener('resize', this.func)
}

三、綁在 EventBus 的事件沒有解綁

舉個例子

<template>
  <div id="home">這裏是首頁</div>
</template>

<script> 
export default {
  mounted () {
   this.$EventBus.$on('homeTask', res => this.func(res))
  }
}
</script>

解決方法:在頁面卸載的時候也能夠考慮解除引用

mounted () {
 this.$EventBus.$on('homeTask', res => this.func(res))
},
destroyed () {
 this.$EventBus.$off()
}

四、Echarts

每個圖例在沒有數據的時候它會建立一個定時器去渲染氣泡，頁面切換後，echarts 圖例是銷燬了，可是這個 echarts 的實例還在內存當中，同時它的氣泡渲染定時器還在運行。這就致使 Echarts 佔用 CPU 高，致使瀏覽器卡頓，當數據量比較大時甚至瀏覽器崩潰。

解決方法：加一個 beforeDestroy()方法釋放該頁面的 chart 資源，我也試過使用 dispose()方法，可是 dispose 銷燬這個圖例，圖例是不存在了，但圖例的 resize()方法會啓動，則會報沒有 resize 這個方法，而 clear()方法則是清空圖例數據，不影響圖例的 resize，並且可以釋放內存，切換的時候就很順暢了。

beforeDestroy () {
  this.chart.clear()
}

五、v-if 指令產生的內存泄露

v-if 綁定到 false 的值，可是實際上 dom 元素在隱藏的時候沒有被真實的釋放掉。

好比下面的示例中，咱們加載了一個帶有很是多選項的選擇框，而後咱們用到了一個顯示/隱藏按鈕，經過一個 v-if 指令從虛擬 DOM 中添加或移除它。這個示例的問題在於這個 v-if 指令會從 DOM 中移除父級元素，可是咱們並無清除由 Choices.js 新添加的 DOM 片斷，從而致使了內存泄漏。

<div id="app">
  <button v-if="showChoices" @click="hide">Hide</button>
  <button v-if="!showChoices" @click="show">Show</button>
  <div v-if="showChoices">
    <select id="choices-single-default"></select>
  </div>
</div>

<script> export default {
    data() {
      return {
        showChoices: true,
      }
    },
    mounted: function () {
      this.initializeChoices()
    },
    methods: {
      initializeChoices: function () {
        let list = []
        // 咱們來爲選擇框載入不少選項，這樣的話它會佔用大量的內存
        for (let i = 0; i < 1000; i++) {
          list.push({
            label: 'Item ' + i,
            value: i,
          })
        }
        new Choices('#choices-single-default', {
          searchEnabled: true,
          removeItemButton: true,
          choices: list,
        })
      },
      show: function () {
        this.showChoices = true
        this.$nextTick(() => {
          this.initializeChoices()
        })
      },
      hide: function () {
        this.showChoices = false
      },
    },
  } </script>

在上述的示例中，咱們能夠用 hide() 方法在將選擇框從 DOM 中移除以前作一些清理工做，來解決內存泄露問題。爲了作到這一點，咱們會在 Vue 實例的數據對象中保留一個屬性，並會使用 Choices API 中的 destroy() 方法將其清除。

<div id="app">
  <button v-if="showChoices" @click="hide">Hide</button>
  <button v-if="!showChoices" @click="show">Show</button>
  <div v-if="showChoices">
    <select id="choices-single-default"></select>
  </div>
</div>

<script> export default {
    data() {
      return {
        showChoices: true,
        choicesSelect: null
      }
    },
    mounted: function () {
      this.initializeChoices()
    },
    methods: {
      initializeChoices: function () {
        let list = []
        for (let i = 0; i < 1000; i++) {
          list.push({
            label: 'Item ' + i,
            value: i,
          })
        }
         // 在咱們的 Vue 實例的數據對象中設置一個 `choicesSelect` 的引用
        this.choicesSelect = new Choices("#choices-single-default", {
          searchEnabled: true,
          removeItemButton: true,
          choices: list,
        })
      },
      show: function () {
        this.showChoices = true
        this.$nextTick(() => {
          this.initializeChoices()
        })
      },
      hide: function () {
        // 如今咱們可讓 Choices 使用這個引用，從 DOM 中移除這些元素以前進行清理工做
        this.choicesSelect.destroy()
        this.showChoices = false
      },
    },
  } </script>

ES6 防止內存泄漏

前面說過，及時清除引用很是重要。可是，你不可能記得那麼多，有時候一疏忽就忘了，因此纔有那麼多內存泄漏。

ES6 考慮到這點，推出了兩種新的數據結構： weakset 和 weakmap 。他們對值的引用都是不計入垃圾回收機制的，也就是說，若是其餘對象都再也不引用該對象，那麼垃圾回收機制會自動回收該對象所佔用的內存。

const wm = new WeakMap()
const element = document.getElementById('example')
vm.set(element, 'something')
vm.get(element)

上面代碼中，先新建一個 Weakmap 實例。而後，將一個 DOM 節點做爲鍵名存入該實例，並將一些附加信息做爲鍵值，一塊兒存放在 WeakMap 裏面。這時，WeakMap 裏面對 element 的引用就是弱引用，不會被計入垃圾回收機制。

註冊監聽事件的 listener 對象很適合用 WeakMap 來實現。

// 代碼1
ele.addEventListener('click', handler, false)

// 代碼2
const listener = new WeakMap()
listener.set(ele, handler)
ele.addEventListener('click', listener.get(ele), false)

代碼 2 比起代碼 1 的好處是：因爲監聽函數是放在 WeakMap 裏面，一旦 dom 對象 ele 消失，與它綁定的監聽函數 handler 也會自動消失。