为什么jQuery的内存泄漏问题如此严重？ [英] Why does jquery leak memory so badly?
问题描述
这是怎么样的一个后续的问题我上周发布： <一href="http://stackoverflow.com/questions/2429056/simple-jquery-ajax-call-leaks-memory-in-ie">http://stackoverflow.com/questions/2429056/simple-jquery-ajax-call-leaks-memory-in-ie
我爱jQuery的语法和所有的不错的功能，但我一直有一个页面，该页面会自动更新表格单元通过Ajax调用内存泄漏的麻烦。
所以，我创建了两个简单的测试页面用于试验。这两个页面做一个AJAX调用每0.1秒。每一个成功的Ajax调用后，计数器加一和DOM被更新。经过1000次循环的脚本将停止。
一个使用jQuery的两个Ajax调用和更新DOM。其他使用雅虎API的AJAX和做了的document.getElementById（...）。innerHTML来更新DOM。
jQuery的版本，内存泄漏严重。运行在点滴（XP家庭与IE7），它开始于9MB，并完成约48MB，内存线性增长的全部时间。如果我注释掉更新DOM行了，它仍然在结束32MB，这表明即使是简单的DOM更新漏一显著的内存量。非jquery的版本的开始和结束在约9MB，不管它是否更新了DOM。
有没有人有什么原因造成了jQuery漏得很厉害了很好的解释？我失去了一些东西明显？是否有一个循环引用，我不知道呢？还是jQuery的只是有一些严重的内存问题？
下面是源漏（jQuery的）版本：
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =http://www.google.com/jsapi＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
google.load（'jquery的'，'1.4.2'）;
＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
变种计数器= 0;
leakTest（）;
传播leakTest（）{
$阿贾克斯（网址：{url：/html/delme.x，
键入：GET，
成功：incrementCounter
}）;
}
函数incrementCounter（数据）{
如果（柜＆LT; 1000）{
反++;
$（'＃柜台）文本（柜）;
的setTimeout（leakTest，100）;
}
否则$（'＃柜台）文本（'完成'）。
}
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV＆GT;为什么内存使用率上升＆LT; / DIV＆GT;
＆LT; DIV ID =计数器＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
这里是不露的版本：
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =http://yui.yahooapis.com/2.8.0r4/build/yahoo/yahoo-min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =http://yui.yahooapis.com/2.8.0r4/build/event/event-min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =http://yui.yahooapis.com/2.8.0r4/build/connection/connection_core-min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
变种计数器= 0;
leakTest（）;
传播leakTest（）{
YAHOO.util.Connect.asyncRequest（GET，
/html/delme.x，
{成功：incrementCounter}）;
}
功能incrementCounter（O）{
如果（柜＆LT; 1000）{
反++;
。的document.getElementById（'反'）的innerHTML =计数器;
的setTimeout（leakTest，100）;
}
其他的document.getElementById（'反'）。innerHTML的='完了。
}
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV＆GT;内存使用稳定，右LT; / DIV＆GT;
＆LT; DIV ID =计数器＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
我最初的想法是，这事做的方式jQuery的AJAX方法之一：
一个。创建循环引用，IE浏览器尤其是坏
乙。创建在其上不能由于它们已被创建的方式和DontDelete属性的设置中删除内部对象的属性。更多信息请参见本：<一href="http://perfectionkills.com/understanding-delete/">http://perfectionkills.com/understanding-delete/
无论哪种方式，该垃圾收集器将是从拾取垃圾pvented $ P $，这将导致失控内存泄漏，尤其是如果该可疑的功能被频繁执行。
This is kind of a follow-up to a question I posted last week: http://stackoverflow.com/questions/2429056/simple-jquery-ajax-call-leaks-memory-in-ie
I love the jquery syntax and all of its nice features, but I've been having trouble with a page that automatically updates table cells via ajax calls leaking memory.
So I created two simple test pages for experimenting. Both pages do an ajax call every .1 seconds. After each successful ajax call, a counter is incremented and the DOM is updated. The script stops after 1000 cycles.
One uses jquery for both the ajax call and to update the DOM. The other uses the Yahoo API for the ajax and does a document.getElementById(...).innerHTML to update the DOM.
The jquery version leaks memory badly. Running in drip (on XP Home with IE7), it starts at 9MB and finishes at about 48MB, with memory growing linearly the whole time. If I comment out the line that updates the DOM, it still finishes at 32MB, suggesting that even simple DOM updates leak a significant amount of memory. The non-jquery version starts and finishes at about 9MB, regardless of whether it updates the DOM.
Does anyone have a good explanation of what is causing jquery to leak so badly? Am I missing something obvious? Is there a circular reference that I'm not aware of? Or does jquery just have some serious memory issues?
Here is the source for the leaky (jquery) version:
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jquery', '1.4.2');
</script>
<script type="text/javascript">
var counter = 0;
leakTest();
function leakTest() {
$.ajax({ url: '/html/delme.x',
type: 'GET',
success: incrementCounter
});
}
function incrementCounter(data) {
if (counter<1000) {
counter++;
$('#counter').text(counter);
setTimeout(leakTest,100);
}
else $('#counter').text('finished.');
}
</script>
</head>
<body>
<div>Why is memory usage going up?</div>
<div id="counter"></div>
</body>
</html>
And here is the non-leaky version:
<html>
<head>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/event/event-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/connection/connection_core-min.js"></script>
<script type="text/javascript">
var counter = 0;
leakTest();
function leakTest() {
YAHOO.util.Connect.asyncRequest('GET',
'/html/delme.x',
{success:incrementCounter});
}
function incrementCounter(o) {
if (counter<1000) {
counter++;
document.getElementById('counter').innerHTML = counter;
setTimeout(leakTest,100);
}
else document.getElementById('counter').innerHTML = 'finished.'
}
</script>
</head>
<body>
<div>Memory usage is stable, right?</div>
<div id="counter"></div>
</body>
</html>
My initial thought would be that it has something to do with the way the jquery ajax method either:
a. creates circular references, especially bad for IE
b. creates properties on internal objects which cannot be deleted due to the way they have been created and the setting of the DontDelete property. See this for more info: http://perfectionkills.com/understanding-delete/
Either way, the garbage collector would be prevented from picking up the trash, which would result in a runaway memory leak, especially if that suspect function is executing frequently.
这篇关于为什么jQuery的内存泄漏问题如此严重？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
