Question

我之前已经问过这个问题，但似乎没有一个答案可以解决这个问题。我正在测试一个AJAX网页，它通过javascript更新DOM中的元素。

每分钟都会向服务器查询新数据，并相应地更新DOM。据我所知，Chrome中此页面的内存使用量增长，但不会太多（它开始大约40 MB，最大可能达到80 MB）。但是，在Firefox中，内存使用量大约为120 MB，可以扩展到400 MB以上。我已经使用Firebug逐步完成了Javascript，看起来当通过我的Javascript方法更新DOM时，内存扩展最多。

DOM操作很简单，例如：

var myTable = document.createElement("table");

var thead = document.createElement("thead");
var tr = document.createElement("tr");
var th = document.createElement("th");
th.appendChild(document.createTextNode("column1"));
tr.appendChild(th);

for(var test in obj.testObjs){
    th = document.createElement("th");
    th.appendChild(document.createTextNode(obj.testObjs[test].myVar));
    tr.appendChild(th);
}

在将新数据附加到DOM中的节点之前，我首先清除现有数据。我尝试了很多方法，包括这里描述的内容：How to remove DOM elements without memory leaks?

还有一个简单的方法，例如：

function clearChildren(node){
    if(node != null){
        while (node.hasChildNodes()) node.removeChild(node.firstChild);
    }
}

我还读过（Cyclic adding/removing of DOM nodes causes memory leaks in JavaScript?）浏览器在达到某个级别时才开始收集垃圾？可以证实吗？由于记忆力的增长，我觉得我的电脑在一段时间后运行缓慢。

我觉得必须有一个解决方案，因为我测试过的执行相同功能步骤的商业网站不会导致内存使用增长。

非常感谢任何帮助。

谢谢。

Answer 1

可以确认吗？

取决于。

一般情况下，浏览器会在他们感觉到它时使用GC，并且启发式方法可以经常更改。我怀疑，如果你每晚尝试一下Firefox，你会看到与你上面描述的完全不同的行为。自Firefox 5发布以来，至少有2次GC启发式更改。

Answer 2

innerHTML=''

准备用于GC处理的变量的方法是错误的您需要在元素上使用delete函数以及此元素引用的每个元素很多，对吧？这就是为什么我们有JS库为我们编写的原因。我检查了Mootools中的代码（下载并搜索 destroy ），在我看来，它写得正确。
我想其他图书馆也是如此。

通过Javascript更新DOM导致内存泄漏（仅限Firefox？）

2 个答案: