这是我上周发布的一个问题的后续问题: 简单的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> …我有一个模块,它返回一个由JSON数据和图像对象组成的数组.因为加载JSON(来自其他文件)和图像对象都需要时间,所以我需要我的模块只在完成两次后才返回数组.
目前,模块总是在其他模块中返回'undefined',我相信这是因为模块没有等待像我期望的那样返回(但我不确定).或者,因为使用此Atlas模块的其他模块在返回任何内容之前将其声明为变量.
编辑以显示我如何定义/要求模块 *再次编辑以显示更多代码*
这是我的tile-atlas模块:
define( function() {
var tilesheetPaths = [
"tilesheets/ground.json",
"tilesheets/ground-collision.json",
"tilesheets/objects-collision.json"
];
var tileAtlas = [ ];
function loadAtlasJSON() {
for (var i = 0; i < tilesheetPaths.length; i++) {
loadJSON(
{
fileName: tilesheetPaths[ i ],
success: function( atlas ) {
addToTileAtlas( atlas );
}
}
);
}
};
function addToTileAtlas( atlas ) {
atlas.loaded = false;
var img = new Image();
img.onload = function() {
atlas.loaded = true;
};
img.src = atlas.src;
// …我发现 IE6 和 Firefox 7 之间的结果不同。我认为对于不同的浏览器，差异可能不会那么大，因为 IE6 的大部分使用 ActiveX 控件，而其他所有内容都使用 XMLHttpRequest。我相信 XMLHttpRequest 在 IE7 之前并不是原生的。
在 IE6 ActiveXObject 和 Firefox 7 中似乎是错误的。但我似乎找不到文档。
// one of these lines gets called - the first successful one
obj = new XMLHttpRequest();
obj = new ActiveXObject("Msxml2.XMLHTTP.3.0");
obj = new ActiveXObject("Msxml2.XMLHTTP");
obj = new ActiveXObject("Microsoft.XMLHTTP");
// now later the code makes this call
obj.open("GET",url);
// notice how the third parameter [async] is not assigned
我的问题是在上述不同场景下 async 属性的默认值是什么？