關(guān)于js內(nèi)存泄露的一個好例子
我把別人的例子改了一下,覺得這樣寫更緊湊!套用別人的原話,當一個DOM對象包含一個Js對象的引用(例如一個Event Handler), 而這個Js對象又持有對這個DOM對象的引用時,一個環(huán)狀引用就行成了,于是在ie下就出現(xiàn)了內(nèi)存泄露。點擊“運行代碼”并打開任務(wù)管理器看內(nèi)存變化。分別在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下該怎么解決呢?
在刪除節(jié)點的時候,手動破除環(huán)狀引用,把里面setInterval那段代碼稍微改動以下:
setInterval(function(){
q.push(makeSpan());
if(q.length>=10){
var s = q.shift();
if(s){
s.onclick = null;//關(guān)鍵在這里
s.parentNode.removeChild(s);
}
}
n++;
},10);
相關(guān)文章
JavaScript中各種二進制對象關(guān)系的深入講解
JavaScript中用于表示二進制對象有,Blob對象、和 ArrayBuffer 對象,這篇文章主要給大家介紹了關(guān)于JavaScript中各種二進制對象關(guān)系的相關(guān)資料,需要的朋友可以參考下2021-09-09Bootstrap基本組件學習筆記之input輸入框組(9)
這篇文章主要為大家詳細介紹了Bootstrap基本組件學習筆記之input輸入框組,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12BootStrap學習系列之布局組件(下拉,按鈕組[toolbar],上拉)
這篇文章主要介紹了BootStrap學習系列之布局組件(下拉,按鈕組[toolbar],上拉)的相關(guān)資料,需要的朋友可以參考下2017-01-01JS求1到任意數(shù)之間的所有質(zhì)數(shù)的方法詳解
這篇文章主要介紹了JS求1到任意數(shù)之間的所有質(zhì)數(shù),本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05關(guān)于webpack2和模塊打包的新手指南(小結(jié))
本篇文章主要介紹了關(guān)于webpack2和模塊打包的新手指南(小結(jié)),具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-08-08js實現(xiàn)瀏覽器窗口大小被改變時觸發(fā)事件的方法
這篇文章主要介紹了js實現(xiàn)瀏覽器窗口大小被改變時觸發(fā)事件的方法,實例分析了window.onresize方法的使用技巧,需要的朋友可以參考下2015-02-02