确实jQuery的html的()方法泄漏存储器?(does jQuery .html() metho

2019-08-03 06:16发布

我建立了一个游戏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引擎的引用 - 到泄漏的一半。 函数体使用的标签,它创建了一个结束 - 标签参考保持与它将来调用的函数。 这就完成标签之间的循环引用 - >功能(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(串)。



Answer 2:

始终使用.empty().html(...)而不是仅仅.html()

.empty()解除绑定事件侦听器从DOM对象您要删除,并优雅地删除它们。



文章来源: does jQuery .html() method leak memory?