jQuery .html()方法泄漏内存吗？

Question

我正在构建一个requestAnimationFrame包含对jQuery html()方法调用的循环的游戏.它只是更新游戏操作旁边的状态窗口中的文本.

我注意到Chrome的时间线监视器,DOM节点上升和上升,每分钟数千!当我更改我的代码时:

// creates a ton of DOM nodes
$("#readout").html(data);

至

// DOM nodes does not increase over time
document.getElementById('readout').innerHTML = data;

"记忆泄漏"消失了.

Answer 1

简答:不.

答案很长:您的页面/代码中可能还有其他内容.

内存泄漏通常是由Javascript引擎和DOM之间的循环引用引起的.例如:

var div = document.getElementById('divId');
div.onclick = function() {
    doSomething(div);
};

该脚本获取对页面上div的引用.到目前为止,我们没事.下一行将一个函数分配给DOM上的事件处理程序,创建从DOM到Javascript引擎的引用 - 泄漏的一半.函数体使用标签,它创建一个Closure--标签引用与函数一起保存,以便将来调用它.这完成了标记 - >函数(DOM - > JS)和函数 - >标记(JS - > DOM)之间的循环引用,因此2将位于内存中,直到浏览器的进程被销毁.

因此,为了使您提到的任何一行代码泄漏,必须消除上面附带事件的标记(或遵循类似模式的数据).但是,jQuery的.html(字符串)不遗余力地阻止这些:

// Remove element nodes and prevent memory leaks
elem = this[i] || {};
if ( elem.nodeType === 1 ) {
    jQuery.cleanData( getAll( elem, false ) );
    elem.innerHTML = value;
}

所以它循环遍历标签内的所有标签,你正在运行.html(字符串)并在它们上运行cleanData(),这反过来做到这一点:

jQuery.removeEvent( elem, type, data.handle );

从而防止泄漏.

所以为了用这种方法泄漏内存而不是浏览器内置的.innerHTML你必须触发一些非常模糊的浏览器错误(似乎不太可能),或者更可能是其他东西正在发生并且你误以为对于jQuery的.html(字符串).