避免内存泄漏和内存管理的Javascript技巧

本文的示例讲述了在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;
Var treeRef = select ('#tree');

/ / 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值= setTimeout(function()){
Ref.callAgain();
},90000);
}
}

BuggyObject.callAgain();
虽然您希望,但计时器仍在恢复中。
buggyobject = null;
}




5)调试内存

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

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



希望本文能对javascript程序设计的研究有所帮助。