jQuery .html()方法是否泄漏内存?

我正在使用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;

“内存泄漏”消失.

简答:不.

长的答案:你的页面/代码中可能还有其他的东西.

内存泄漏通常由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(string),并在其上运行cleanData(),这反过来又做:

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

从而防止泄漏.

所以为了通过这种方法泄漏内存,而不是浏览器内置的.innerHTML,你必须触发一些非常模糊的浏览器错误(似乎不大可能),或者更有可能是其他事情发生,你错了对于jQuery的.html(字符串).

翻译自:https://stackoverflow.com/questions/13592562/does-jquery-html-method-leak-memory

转载注明原文:jQuery .html()方法是否泄漏内存?