如何在JavaScript中创建内存泄漏？

Question

如何在JavaScript中创建内存泄漏？

use*_*642 26 javascript closures garbage-collection memory-leaks

我想了解什么样的代码导致JavaScript中的内存泄漏并创建下面的脚本.但是,当我在OS X上的OS 6.0.4中运行脚本时,活动监视器中显示的内存消耗并没有真正增加.

我的脚本有问题,或者这不再是现代浏览器的问题？

<html>
<body>
</body>
<script>
var i, el;

function attachAlert(element) {
    element.onclick = function() { alert(element.innerHTML); };
}

for (i = 0; i < 1000000; i++) {
    el = document.createElement('div');
    el.innerHTML = i;
    attachAlert(el);
}
</script>
</html>

Run Code Online (Sandbox Code Playgroud)

该脚本基于Google JavaScript风格指南的Closure部分:http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml？ showow =Closures #Closures

编辑:导致上述代码泄漏的错误显然已得到修复:http://jibbering.com/faq/notes/closures/#clMem

但我的问题仍然存在:是否有人能够提供在现代浏览器中泄漏内存的JavaScript代码的真实示例？

互联网上有很多文章表明内存泄漏可能是复杂单页面应用程序的问题,但我很难找到可以在浏览器中运行的示例.

Answer 1

Ste*_*hen 13

你没有保留你创建的元素并在任何地方引用 - 这就是你没有看到内存使用量增加的原因.尝试将元素附加到DOM,或将其存储在对象中,或将onclick设置为一个不同的元素.然后你会看到内存使用率飙升.垃圾收集器将通过并清理任何无法再引用的内容.

基本上是您的代码的演练:

创建元素(el)
创建一个引用该元素的新函数
将该函数设置为该元素的onclick
用新元素覆盖元素

一切都围绕着存在的元素.一旦无法访问该元素,就无法再访问该onclick.因此,由于无法访问onclick,所以创建的函数被销毁了.函数只有对元素的引用..所以元素也被清理了.

有人可能有一个更技术的例子,但这是我理解javascript垃圾收集器的基础.

编辑:这是您的脚本泄漏版本的许多可能性之一:

<html>
<body>
</body>
<script>
var i, el;

var createdElements = {};
var events = [];

function attachAlert(element) {
    element.onclick = function() { alert(element.innerHTML); };
}

function reallyBadAttachAlert(element) {
    return function() { alert(element.innerHTML); };
}

for (i = 0; i < 1000000; i++) {
    el = document.createElement('div');
    el.innerHTML = i;

    /** posibility one: you're storing the element somewhere **/
    attachAlert(el);
    createdElements['div' + i] = el; 

    /** posibility two: you're storing the callbacks somewhere **/
    event = reallyBadAttachAlert(el);
    events.push(event);
    el.onclick = event;

}
</script>
</html>

Run Code Online (Sandbox Code Playgroud)

因此,对于#1,您只需在某处存储对该元素的引用.无论您永远不会使用它 - 因为该引用是在对象中进行的,元素及其回调将永远不会消失(或者至少在您从对象中删除元素之前).对于可能性#2,您可以将事件存储在某处.因为事件可以访问(即通过执行events[10]();),即使元素无处可寻,它仍然被事件引用..因此元素将保留在内存和事件中,直到它从数组中删除.

归档时间：	12 年，7 月前
查看次数：	6682 次
最近记录：	6 年，6 月前