阅读 1895

你以为内存泄露怎么侦测(适用于日常工作和面试)

检查内存泄漏的工具及使用方法:

  1. f12打开谷歌开发者工具
  2. 选择memory--Profiles--Heap snapshot
  3. 进入要检查的页面,并在内存变化之前(从下面的例子来说的话,就是在第一个setTimeout之前,也就是闭包产生之前)点击 Take snapshot,此时浏览器会保存一个当前内存的快照。
  4. 然后变化之后再次点击左上角(Profiles上面)的黑色按钮,再保存一个内存快照。
  5. 分别选择两次快照,并点击summary旁边的下箭头,选择下拉列表中的comparison,这个选项下呈现的是本次(两次快照之间可能存在多次变化,只对比当次与上次间的变化)变化前后的内存差异(当然,初始的快照因为没有变化,所以该列无内容)。
  6. 选择下方constructor中的closure,该选项下呈现的都是变化前后闭包的相关内容。其中new这一栏有·(黑点),表示本次变化新增闭包内存的占用,deleted这一栏有·(黑点),表示本次变化清除该闭包占用的内存。

用例

//全局作用域下写了以下代码
//发生内存泄漏的例子
var obj = {};
function outFun (){
    var a = 0;
    return function innerFun(b){
        a+=b;
        return a;
    }
}
setTimeout(function (){
    obj.newFunc = outFun();
    console.log(obj.newFunc(1)); //1
},3000);
setTimeout(function (){
    obj.newFunc = null;
    console.log('clean'); //clean
},6000);
复制代码

观察分析

  1. 初始时内存快照,无变化,所以无内容
  2. 第一个settimeout之后,本次创建了闭包并占用了内存
  3. 第二个settimeout之后,本次变化将引用闭包的对象属性置空,闭包占用的内存被释放

文中相关

闭包的深入分析与探究请看这里: 你以为什么是闭包

写在最后

需要声明的一点是,我不是一个教授者,我只是一个分享者、一个讨论者、一个学习者,有不同的意见或新的想法,提出来,我们一起研究。分享的同时,并不只是被分享者在学习进步,分享者亦是。

知识遍地,拾到了就是你的。

既然有用,不妨点赞,让更多的人了解、学习并提升。

文章分类
前端
文章标签