萬惡的前端記憶體洩漏及萬善的解決方案

lzg9527 發表於 2021-01-05

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

最近收到測試人員的反饋說我們開發的頁面偶現卡死,點選無反應的情況,特別是開啟頁面較久的時候發生概率較高。開啟工作管理員,看到記憶體佔有率已經很高了,初步判斷可能存在記憶體洩漏的情況。下面排查記憶體洩漏的原因。

系統程式不再用到的記憶體,沒有及時釋放,就叫做記憶體洩漏(memory leak)。當記憶體佔用越來越高,輕則影響系統效能,重則導致程式崩潰。Chrome 限制了瀏覽器所能使用的記憶體極限(64 位為 1.4GB,32 位為 1.0GB)

引起記憶體洩漏的原因

1、意外的全域性變數

由於 js 對未宣告變數的處理方式是在全域性物件上建立該變數的引用。如果在瀏覽器中,全域性物件就是 window 物件。變數在視窗關閉或重新重新整理頁面之前都不會被釋放,如果未宣告的變數快取大量的資料,就會導致記憶體洩露。

  • 未宣告變數
function fn() {
  a = 'global variable'
}
fn()
  • 使用 this 建立的變數(this 的指向是 window)。
function fn() {
  this.a = 'global variable'
}
fn()

解決方法:

  • 避免建立全域性變數
  • 使用嚴格模式,在 JavaScript 檔案頭部或者函式的頂部加上 use strict

2、閉包引起的記憶體洩漏

原因:閉包可以讀取函式內部的變數,然後讓這些變數始終儲存在記憶體中。如果在使用結束後沒有將區域性變數清除,就可能導致記憶體洩露。

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

解決:將事件處理函式定義在外部,解除閉包,或者在定義事件處理函式的外部函式中。

比如:在迴圈中的函式表示式,能複用最好放到迴圈外面。

// 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

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

原因:雖然別的地方刪除了,但是物件中還存在對 dom 的引用。

// 在物件中引用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

4、被遺忘的定時器或者回撥

定時器中有 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 應用需要自行清理元件來確保垃圾回收以預期的方式生效。因此開發過程中,你需要時刻警惕記憶體洩漏的問題。

1、全域性變數造成的記憶體洩露

宣告的全域性變數在切換頁面的時候沒有清空

<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 // 頁面解除安裝的時候解除引用
 }

2、監聽在 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)
}

3、綁在 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()
}

4、Echarts

每一個圖例在沒有資料的時候它會建立一個定時器去渲染氣泡,頁面切換後,echarts 圖例是銷燬了,但是這個 echarts 的例項還在記憶體當中,同時它的氣泡渲染定時器還在執行。這就導致 Echarts 佔用 CPU 高,導致瀏覽器卡頓,當資料量比較大時甚至瀏覽器崩潰。

解決方法:加一個 beforeDestroy()方法釋放該頁面的 chart 資源,我也試過使用 dispose()方法,但是 dispose 銷燬這個圖例,圖例是不存在了,但圖例的 resize()方法會啟動,則會報沒有 resize 這個方法,而 clear()方法則是清空圖例資料,不影響圖例的 resize,而且能夠釋放記憶體,切換的時候就很順暢了。

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

5、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 也會自動消失。

推薦文章

w你必須知道的webpack外掛原理分析
webpack的非同步載入原理及分包策略
總結18個webpack外掛,總會有你想要的!
搭建一個 vue-cli4+webpack 移動端框架(開箱即用)
從零構建到優化一個類似vue-cli的腳手架
封裝一個toast和dialog元件併發布到npm
從零開始構建一個webpack專案
總結幾個webpack打包優化的方法
總結vue知識體系之高階應用篇
總結vue知識體系之實用技巧
總結vue知識體系之基礎入門篇
總結移動端H5開發常用技巧(乾貨滿滿哦!)