jQuery .html()方法会泄漏内存吗? [英] does jQuery .html() method leak memory?

问题描述

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

I am building a game with a requestAnimationFrame loop that includes a call to jQuery html() method. It just updates the text in a status window next to the game action.

我注意到在Chrome的时间轴监视器中，DOM节点在一分钟内成千上万个！当我从以下位置更改代码时:

I notice with Chrome's timeline monitor, that the DOM nodes go up and up and up, thousands in a minute! And when I change my code from:

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

到

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

内存泄漏"消失了.

推荐答案

简短答案:否.

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

Long answer: You likely have something else going on in your page/code.

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

A memory leak is generally caused by a circular reference between the Javascript engine and the DOM. For example:

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

该脚本获取对页面上div的引用.到目前为止，我们还好.下一行将功能分配给DOM上的事件处理程序，从而创建从DOM到Javascript引擎的引用-泄漏的一半.函数主体使用标记，该标记创建一个Closure-标记引用与函数一起保留，以供将来对其调用.这样就完成了标记->函数(DOM-> JS)和函数->标签(JS-> DOM)之间的循环引用，因此2将一直驻留在内存中，直到浏览器进程被破坏为止.

The script obtains a reference to a div on the page. So far we're fine. The next line assigns a function to an event handler on the DOM, creating a reference from the DOM to the Javascript engine - half way to a leak. The function body uses the tag, which creates a Closure - the tag reference is kept with the function for future calls to it. That completes the circular reference between the tag -> function (DOM -> JS) and function -> tag (JS -> DOM), and so the 2 will sit in memory until the browser's process is destroyed.

因此，为了使您提到的任何一行代码泄漏，都必须消除具有如上所述附加事件的标签(或遵循类似模式的数据).但是，jQuery的.html(string)竭尽全力防止出现这些情况:

So in order for either line of code you mentioned to leak, it would have to be eliminating tags that had events attached like above (or data that follows a similar pattern). But, jQuery's .html(string) goes out of its way to prevent these:

// 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()，依次执行以下操作:

So it's looping through all the tags inside the tag you're running .html(string) on and running cleanData() on them, which in turn does this:

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

从而防止泄漏.

因此，为了使用此方法而不是浏览器内置的.innerHTML泄漏内存，您必须触发一些非常晦涩的浏览器错误(似乎不太可能)，或更可能的是，否则，您会误认为它是jQuery的.html(string).

So in order to leak memory with this method and not the browser built-in .innerHTML you'd have to be triggering some very obscure browser bug (seems pretty unlikely), or more likely something else is going on and you're mistaking it for jQuery's .html(string).

这篇关于jQuery .html()方法会泄漏内存吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！