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

我正在用requestAnimationFrame循环，包括打电话给jQueryhtml()方法。它只是在游戏操作旁边的状态窗口中更新文本。

我注意到 Chrome 的时间轴监视器，DOM 节点不断上升，一分钟内有数千个！当我更改代码时：

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

to

// 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 引擎的引用 - 到了泄漏的一半。函数体使用标签，它创建一个闭包 - 标签引用与函数一起保存以供将来调用。这样就完成了 tag -> function (DOM -> JS) 和 function -> tag (JS -> DOM) 之间的循环引用，因此两者将一直保留在内存中，直到浏览器进程被销毁。

因此，为了使您提到的任何一行代码泄漏，都必须消除像上面那样附加事件的标签（或遵循类似模式的数据）。但是，jQuery 的 .html(string) 不遗余力地阻止这些：

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

所以它循环通过all您正在运行 .html(string) 并在其上运行 cleanData() 的标签内的标签，这又会执行以下操作：

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

从而防止泄漏。

所以为了用这个方法泄漏内存not浏览器内置的 .innerHTML 你必须触发一些非常模糊的浏览器错误（似乎不太可能），或者更有可能发生其他事情并且你将其误认为是 jQuery 的 .html(string)。