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

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中的节点追加新数据之前，我首先清除现有数据。我尝试了多种方法，包括此处描述的方法：如何删除 DOM 元素而不造成内存泄漏？

以及一个简单的方法，例如：

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

我也读过（ 循环添加/删除 DOM 节点会导致 JavaScript 中的内存泄漏？）浏览器仅在达到一定级别时才开始收集垃圾？可以确认吗？我感觉我的电脑运行一段时间后由于内存增长而变得缓慢。

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

任何帮助将不胜感激。

谢谢。

Answer 1

可以确认吗？

这取决于。

一般来说，浏览器会在需要时进行 GC，并且启发式可能会经常改变。我怀疑如果您每晚尝试使用 Firefox，您会看到与上面描述的完全不同的行为。自 Firefox 5 发布以来，至少有 2 处 GC 启发式更改。

Answer 2

innerHTML=''

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