我把別人的例子改了一下,覺得這樣寫比較緊湊!套用別人的原話,當一個DOM物件包含一個Js物件的引用(例如一個Event Handler), 而這個Js物件又持有對這個DOM物件的引用時,一個環狀引用就行成了,於是在ie下就出現了記憶體外洩。點擊“運行程式碼”並打開任務管理器以查看記憶體變化。分別在ie8和ff下測試,差距不用多說。
運行程式碼
複製代碼代碼如下:
<html>
<head>
<title>Memory leak</title>
<style>
body{
padding: 10px;
}
</style>
</head>
<body>
</body>
<script>
var q = [];
var n = 0;
setInterval(function(){
q.push(makeSpan());
if(q.length>=10){
var s = q.shift();
if(s){
s.parentNode.removeChild(s);
}
}
n++;
},10);
function makeSpan(){
var s = document.createElement("span");
document.body.appendChild(s);
var t=document.createTextNode("*** " + n + " ***");
s.appendChild(t);
s.onclick=function(e){
s.style.backgroundColor="red";
alert(n);
};
return s;
};
</script>
</html>
那麼在ie下該怎麼解決呢?
在刪除節點的時候,手動破除環狀引用,把裡面setInterval那段程式碼稍微改動以下:
複製代碼代碼如下:
setInterval(function(){
q.push(makeSpan());
if(q.length>=10){
var s = q.shift();
if(s){
s.onclick = null;//關鍵在這裡
s.parentNode.removeChild(s);
}
}
n++;
},10);