如何檢查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已經不存在實例對象了。