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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值