这是一个非常简单的网页,使用jQuery在IE8中会泄漏内存(我通过观察Windows任务管理器中iexplore.exe进程的内存使用情况来检测内存泄漏):
<html>
<head>
<title>Test Page</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script type="text/javascript">
function resetContent() {
$("#content div").remove();
for(var i=0; i<10000; i++) {
$("#content").append("<div>Hello World!</div>");
}
setTimeout(resetTable, 2000);
}
$(resetContent);
</script>
<div id="content"></div>
</body>
</html>
显然即使调用jQuery.remove()
函数,我仍然会遇到一些内存泄漏问题。 我可以编写自己的 remove 函数,如下所示:
$.fn.removeWithoutLeaking = function() {
this.each(function(i,e){
if( e.parentNode )
e.parentNode.removeChild(e);
});
};
这段代码运行良好且不会泄漏内存。那么为什么jQuery会泄漏内存呢?我根据jQuery.remove()
创建了另一个remove函数,但这确实会导致泄漏:
$.fn.removeWithLeakage = function() {
this.each(function(i,e) {
$("*", e).add([e]).each(function(){
$.event.remove(this);
$.removeData(this);
});
if (e.parentNode)
e.parentNode.removeChild(e);
});
};
有趣的是,内存泄漏似乎是由jQuery调用的每个函数引起的。这些函数旨在防止与DOM元素相关的事件和数据被删除时发生内存泄漏。当我调用removeWithoutLeaking
函数时,我的内存随时间保持恒定,但当我改为调用removeWithLeakage
函数时,内存却不断增长。
我的问题是,那个每个函数具体是什么?
$("*", e).add([e]).each(function(){
$.event.remove(this);
$.removeData(this);
});
可能会导致内存泄漏的原因是什么?
编辑:修复了代码中的拼写错误,重新测试后发现对结果没有影响。
进一步编辑:我向jQuery项目提交了一个错误报告,因为这似乎是一个jQuery的bug:http://dev.jquery.com/ticket/5285