前端常見記憶體洩漏及解決方法
前端記憶體洩漏
系統程序不再用到的記憶體，沒有及時釋放，就叫做記憶體洩漏（memory leak）。當記憶體佔用越來越高，輕則影響系統性能，重則導致程序崩潰。Chrome 限制了瀏覽器所能使用的記憶體極限64位為 1.4GB，32 位為 1.0GB
一、引起記憶體洩漏的原因
1. 意外的全域性變數
由於 js 對未宣告變數的處理方式是在全域性物件上建立該變數的引用。如果在瀏覽器中，全域性物件就是 window 物件。變數在視窗關閉或重新重新整理頁面之前都不會被釋放，如果未宣告的變數快取大量的資料，就會導致記憶體洩露。
1.1 未宣告變數
function fn() { a = 'hello' } fn()
1.2 使用 this 建立的變數(this 的指向是 window)。
function fn() {
this.a = 'hello'
}
fn()
解決方法：
- 避免建立全域性變數
- 使用嚴格模式,在 JavaScript 檔案頭部或者函式的頂部加上 use strict
2. 閉包引起的記憶體洩漏
由於閉包可以讀取函式內部的變數，然後讓這些變數始終儲存在記憶體中。如果在使用結束後沒有將區域性變數清除，就可能導致記憶體洩露。
function fn () { var a = "hello" return function () { console.log(a) } }
解決方法：將事件處理函式定義在外部，解除閉包，或者在定義事件處理函式的外部函式中。
比如：在迴圈中的函式表示式，能複用最好放到迴圈外面。
// bad
for (var k = 0; k < 5; k++) {
var t = function (a) {
// 建立了5次函式物件。
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('btn'))
// 但是此時全域性變數elements還是保留了對btn的引用, btn還是存在於記憶體中,不能被回收
}
解決方法：手動刪除，elements.btn = null
4. 被遺忘的定時器或者回調
定時器中有 dom 的引用，即使 dom 刪除了，但是定時器還在，所以記憶體中還是有這個 dom。
// 定時器 loadData例為請求資料函式
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 = "innerHTML"
}
btn.addEventListener('click', onClick)
解決方法：
- 手動刪除定時器和 dom
- removeEventListener 移除事件監聽
二、vue中容易出現記憶體洩漏的幾種情況
在 Vue單頁面開發應用，那麼就更要當心記憶體洩漏的問題。因為在 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>
解決方法：在頁面銷燬的時候，順便解除引用，釋放記憶體
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 資源。
clear()：清空繪畫內容，清空後例項可用，因為並非釋放示例的資源，釋放資源我們需要dispose()。
dispose()：釋放圖表例項，釋放後例項不再可用。
beforeDestroy () {
this.chart.clear()
this.chart.dispose()
}
5. v-if 指令產生的記憶體洩露
v-if 繫結到 false 的值，但是實際上 dom 元素在隱藏的時候沒有被真實的釋放掉。
比如下面的示例中，我們載入了一個帶有非常多選項的選擇框，然後我們用到了一個顯示/隱藏按鈕，通過一個 v-if 指令從虛擬 DOM 中新增或移除它。這個示例的問題在於這個 v-if 指令會從 DOM 中移除父級元素，但是我們並沒有清除由 Choices.js 新新增的 DOM 片段，從而導致了記憶體洩漏。
<template>
<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>
</template>
<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也會自動消失。