如何檢查Javascript中的記憶體洩漏

js記憶體洩漏通常是由於閉包所引起的，我們在判斷是否存在記憶體洩漏的時候往往會覺得無從下手。通常我們通過codereview去判斷是否洩漏，但是這種方法不夠客觀。我們需要一種客觀的方法來證明洩漏的存在。

Chrome Devtool

其實Devtool已經提供了檢查的工具，這就是Memory皮膚。它大概長這樣。

我們可以通過這個工具對頁面中某一時刻的記憶體狀態做一個快照，這個快照中包含此刻頁面上所有的Dom節點和js物件。我們可以搜尋可能洩露的js物件來證實記憶體洩漏的存在。

舉例

這個例子明視訊記憶體在記憶體洩漏，l1這個物件被事件處理函式訪問，所以不能得到釋放。我們來實際操作一下。

function leak(arg) {
    this.arg = arg;
}

function test() {
    var l1= new leak('It is a leak');

    document.body.addEventListener('click', function() {
        l1.arg = 'Here you are!'
    })
}

test();
複製程式碼

Step 1 錄製快照

選擇Heap snapshot，然後點選左上角小圓點。數秒後可以看到生成的快照。

Step 2 搜尋潛在洩露物件

在上方輸入可能洩露的物件型別，然後檢視記憶體中時候有改型別的例項。

入上圖所示，我們找到了一個例項物件。再通過一些資料比對，我們就可以證明了洩露的存在。

Step 3 修正這一處洩露

我們可以在事件出發後刪除事件繫結，這樣就可以消除這個洩露

function leak(arg) {
    this.arg = arg;
}

function test() {
    var l1= new leak('It is a leak');

    function l() {
        console.info('Here you are!')
        l1.arg = 'Here you are!'
        document.body.removeEventListener('click', l);
    }

    document.body.addEventListener('click', l)
}

test();
複製程式碼

此時leak已經不存在例項物件了。