最近收到測試人員的反饋說我們開發的頁面偶現卡死,點擊無反應的情況,特別是打開頁面較久的時候發生概率較高。打開任務管理器,看到內存佔有率已經很高了,初步判斷可能存在內存泄漏的情況。下面排查內存泄漏的原因。
系統進程不再用到的內存,沒有及時釋放,就叫做內存泄漏(memory leak)。當內存佔用越來越高,輕則影響系統性能,重則導致進程崩潰。Chrome 限制了瀏覽器所能使用的內存極限(64 位爲 1.4GB,32 位爲 1.0GB)
引起內存泄漏的原因
意外的全局變量
由於 js 對未聲明變量的處理方式是在全局對象上創建該變量的引用。如果在瀏覽器中,全局對象就是 window 對象。變量在窗口關閉或重新刷新頁面之前都不會被釋放,如果未聲明的變量緩存大量的數據,就會導致內存泄露。
-
未聲明變量
function fn() {
a = 'global variable'
}
fn()
-
使用 this 創建的變量(this 的指向是 window)。
function fn() {
this.a = 'global variable'
}
fn()
解決方法:
-
避免創建全局變量 -
使用嚴格模式,在 JavaScript 文件頭部或者函數的頂部加上 use strict
。
閉包引起的內存泄漏
原因:閉包可以讀取函數內部的變量,然後讓這些變量始終保存在內存中。如果在使用結束後沒有將局部變量清除,就可能導致內存泄露。
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
沒有清理的 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
。
被遺忘的定時器或者回調
定時器中有 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 也會自動消失。
回覆“加羣”與大佬們一起交流學習~
點擊“閱讀原文”查看 100+ 篇原創文章
本文分享自微信公衆號 - 前端自習課(FE-study)。
如有侵權,請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”,歡迎正在閱讀的你也加入,一起分享。