很容易导致Javascript内存泄漏的几个方面。

发表在谷歌webperf(伦敦webperf组),2014年8月26日。

高效的Javascript Web应用程序必须流畅、快速,任何与用户交互的应用程序都需要考虑如何确保有效的内存使用,因为如果消耗太多,页面就会崩溃并迫使用户重新加载,而只能躲在角落里哭泣。

自动垃圾收集并不能代替有效的内存管理,特别是在大型、长期运行的Web应用程序。在这个讲座中,我们将演示如何管理内存,有效地通过Chrome的开发工具。

了解如何解决性能问题,例如内存泄漏、频繁的垃圾收集暂停和整个内存扩展,这样可以节省您的精力。

Addy Osmani显示了他的PPT在Chrome V8内存泄露的例子很多:

1)删除一个对象属性将减慢这个对象(15倍的内存)

复制代码代码如下所示:

var o = { x:Y };

删除OX; / / O将成为一个慢的物体

OX; / /

var o = { x:Y };

O =空;



2)关闭

当外部变量的闭包引入闭包时,闭包关闭时对象不能循环(GC)。

复制代码代码如下所示:

var =函数(){()

VaR largeStr =新的阵列(1000000)加入(x);

返回函数(){

返回largeStr;

}

(});



3)DOM泄漏

当原始COM被删除,不删除的子节点参考,无法恢复。

复制代码代码如下所示:

选择= document.queryselector VaR;

无功treeref =选择(#树);

/ / leafref在COM树子节点treefre

无功leafref =选择(#叶);

VaR的身体=选择('body);

Body.removeChild(treeref);

/ / #树不能偿还,因为treeref仍在

/解决方案:

treeref = null;

/ /树不能被回收,因为在leafref树叶的结果。

leafref = null;

#树可以释放 / /现在。



4)定时器(固定)时间泄漏

计时器也是内存泄漏的常见场所。

复制代码代码如下所示:

对于(var i = 0;i < 90000;i + +){

无功buggyobject = { {

CallAgain:函数(){

var =;

Var Val = setTimeout (function ()) {

Ref.callAgain();

},90000);

}

}

BuggyObject.callAgain();

虽然您希望,但计时器仍在恢复中。

buggyobject = null;

}



5)调试内存

Chrome自己的内存调试器可以很容易地查看内存使用情况和内存泄漏情况。

在时间轴>内存点击记录:

更多的,看看原来的PPT。