问题描述
||
我知道以前曾有人问过这个问题,但是似乎没有一个答案可以解决这个问题。我正在测试一个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中的内存泄漏?),浏览器仅在达到一定级别时才开始收集垃圾?可以确认吗?我感觉由于内存的增加,一段时间后我的PC运行缓慢。
我觉得必须有解决方案,因为我测试过的执行相同功能步骤的商业网站不会导致内存使用量增加。
任何帮助将不胜感激。
谢谢。
解决方法
innerHTML=\'\'
为GC处理准备变量是错误的方法。
您需要在元素以及此元素引用的每个元素上使用delete
函数。
很多吧?
这就是为什么我们在其中为我们编写了JS库。我检查了Mootools中的代码(下载并搜索destroy),对我而言似乎写得正确。
我猜在其他库中也一样。
,
可以确认吗?
这取决于。
通常,浏览器会在需要时使用GC,并且启发式方法可能会经常更改。我怀疑如果每晚尝试使用Firefox,您会发现与上述行为截然不同的行为。自Firefox 5发布以来,至少有2次GC启发式更改。