如何检查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已经不存在实例对象了。