这是我上周发布的一个问题的后续问题: 简单的jQuery Ajax调用在Internet Explorer中泄漏了内存
我喜欢jquery语法及其所有不错的功能,但我一直遇到一个页面问题,该页面通过ajax调用泄漏内存自动更新表格单元格.
所以我创建了两个简单的测试页面进行实验.两个页面每隔0.1秒进行一次ajax调用.在每次成功调用ajax之后,计数器会递增并更新DOM.脚本在1000次循环后停止.
一个使用jquery进行ajax调用和更新DOM.另一个使用Yahoo API作为ajax,并使用document.getElementById(...).innerHTML来更新DOM.
jquery版本严重泄漏内存.滴水运行(在带有IE7的XP Home上),从9MB开始,大约48MB,内存随时间线性增长.如果我注释掉更新DOM的行,它仍然会以32MB结束,这表明即使是简单的DOM更新也会泄漏大量内存.无论是否更新DOM,非jquery版本的启动和完成大约为9MB.
有没有人能够很好地解释导致jquery如此严重泄漏的原因？我错过了一些明显的东西吗 是否有我不知道的循环引用？或者jquery是否只有一些严重的内存问题？
以下是leaky(jquery)版本的源代码:
<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>
这是非泄漏版本:
<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> …我创建了一个每秒进行一次Ajax调用的网页.在Internet Explorer 7中,它严重泄漏内存(大约15分钟内20 MB).
该计划非常简单.它只运行一个JavaScript函数来进行Ajax调用.服务器返回一个空字符串,JavaScript代码不对其执行任何操作.我用它setTimeout来每秒运行一次这个功能,而我正在使用Drip来观察这个东西.
这是来源:
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jquery', '1.4.2');
google.load('jqueryui', '1.7.2');
</script>
<script type="text/javascript">
setTimeout('testJunk()',1000);
function testJunk() {
$.ajax({ url: 'http://xxxxxxxxxxxxxx/test', // The url returns an empty string
dataType: 'html',
success: function(data){}
});
setTimeout('testJunk()',1000)
}
</script>
</head>
<body>
Why is memory usage going up?
</body>
</html>
怎么堵这个漏洞？我有一个真正的应用程序,以这种方式更新一个大表,但无人看管它将消耗千兆字节的内存.
编辑:好的,所以经过一些好的建议后,我将代码修改为:
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jquery', '1.4.2');
google.load('jqueryui', '1.7.2');
</script>
<script type="text/javascript">
setTimeout(testJunk,1000);
function testJunk() {
$.ajax({ url: 'http://xxxxxxxxxxxxxx/test', …我的问题是假设您正在创建一个将长时间显示的网页.我很好奇在这种情况下使用JQuery/JavaScript会导致内存泄漏的常见问题是什么？例如,当您调用$.remove()元素集合时,内存会发生什么？谢谢!
我有一个在IE8和Firefox中泄漏内存的网页; Windows Process Explorer中显示的内存使用量随着时间的推移不断增长.
以下页面请求"unplanned.json"url,这是一个永远不会更改的静态文件(尽管我设置了我的Cache-controlHTTP标头以no-cache确保Ajax请求始终通过).当它获得结果时,它清除HTML表,循环从服务器返回的json数组,并为数组中的每个条目动态地向HTML表添加一行.然后等待2秒钟并重复此过程.
这是整个网页:
<html> <head>
<title>Test Page</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head> <body>
<script type="text/javascript">
function kickoff() {
$.getJSON("unplanned.json", resetTable);
}
function resetTable(rows) {
$("#content tbody").empty();
for(var i=0; i<rows.length; i++) {
$("<tr>"
+ "<td>" + rows[i].mpe_name + "</td>"
+ "<td>" + rows[i].bin + "</td>"
+ "<td>" + rows[i].request_time + "</td>"
+ "<td>" + rows[i].filtered_delta + "</td>"
+ "<td>" + rows[i].failed_delta + "</td>"
+ "</tr>").appendTo("#content tbody");
}
setTimeout(kickoff, 2000);
}
$(kickoff);
</script>
<table id="content" border="1" …