IE事件注册相关的内存泄露总结

1、将元素传入闭包,并在其中注册事件,这是导致内存泄露的根源之一;另一必要条件是:元素必须脱离文档树,亦即类似执行了语句:

elm.parentNode.removeChild(elm)

   2、解决方式:避免上述情形;在window.onunload中取消事件注册。
   示例如下:
   1、

<div id="test" style="border:1px solid blue;width:100px;height:100px;"></div>
<input type="button" value="leak" onclick="leak()" />
<script><!--
var test=document.getElementById('test');
var global = {};
(function(test){
global.handler=handler;
document.getElementById('test').attachEvent('onclick',handler);
function handler(){};
})(test);//将test传入闭包

window.attachEvent('onunload',function(){
test.detachEvent('onclick',global.handler);//可消除内存泄露
});
function leak(){//执行此句,使test脱离document树.
document.body.removeChild(document.getElementById('test'));
}
//--</script>

以上是dom2的事件注册方式,再来看看dom1的:

<div id="test" style="border:1px solid blue;width:100px;height:100px;"></div>
<input type="button" value="leak" onclick="leak()" />
<script><!--
var test=document.getElementById('test');
(function(test){
document.getElementById('test').onclick=hander;
function hander(){};
})(test);//将test传入闭包

window.attachEvent('onunload',function(){
test.onclick=null;//对应dom1
});
function leak(){
document.body.removeChild(document.getElementById('test'));
}
//--</script>

当然,如果你愿意,完全可以把'onclick'换成任意一个你喜欢的属性:

<div id="test" style="border:1px solid blue;width:100px;height:100px;"></div>
<input type="button" value="leak" onclick="leak()" />
<script><!--
var test=document.getElementById('test');
(function(test){
function hander(){};
document.getElementById('test').ss=hander;
})(test);

window.attachEvent('onunload',function(){淘宝网女装夏装新款
test.ss=null;//可防止泄露,没有这句定然泄露
});
function leak(){
document.body.removeChild(document.getElementById('test'));
}
//--</script>

如果不把test传入闭包,则不会泄露:

var test=document.getElementById('test');
(function(){
document.getElementById('test').onclick=hander;
function hander(){};
})();//不将test传入闭包

当然,如果这个元素始终在doucument树中,也不会泄露:

function leak(){
//注释了下面这句
//document.body.removeChild(document.getElementById('test'));
}

最后,如果你这么写,当然也不会泄露:

<div id="test" style="border:1px solid blue;width:100px;height:100px;"></div>
<input type="button" value="leak" onclick="leak()" />
<script><!--
var test=document.getElementById('test');
function hander(){};
test.onclick=hander;
//--</script>

总结:IE事件模型内存泄露的本质其实就是元素、作用域、事件处理函数之间循环引用。

var test=document.getElementById('test');
(function(test){//作用域A
document.getElementById('test').onclick=hander;
function hander(){
//作用域B商账追收
};
})(test);//将test传入闭包
//A引用test,test引用了hander,hander通过作用域B又引用了A,形成了回路。
//由此可以引出如下例子,它也会泄露:
(function(){//作用域A
var test=document.createElement('dl');
test.onclick=hander;
function hander(){
//作用域B
};
})();

posted @ 2011-06-07 09:35  ctou45  阅读(160)  评论(0编辑  收藏  举报