js記憶體洩露的幾種情況詳細探討

記憶體洩露是指一塊被分配的記憶體既不能使用，又不能回收，直到瀏覽器程序結束，由於瀏覽器垃圾回收方法有bug，會產生記憶體洩露，下面與大家詳細探討下記憶體洩露的幾種情況

記憶體洩露是指一塊被分配的記憶體既不能使用，又不能回收，直到瀏覽器程序結束。在C++中，因為是手動管理記憶體，記憶體洩露是經常出現的事情。而現在流行的C#和Java等語言採用了自動垃圾回收方法管理記憶體，正常使用的情況下幾乎不會發生記憶體洩露。瀏覽器中也是採用自動垃圾回收方法管理記憶體，但由於瀏覽器垃圾回收方法有bug，會產生記憶體洩露。

程式碼塊

1、當頁面中元素被移除或替換時，若元素繫結的事件仍沒被移除，在IE中不會作出恰當處理，此時要先手工移除事件，不然會存在記憶體洩露。

<div id="myDiv"> 
<input type="button" value="Click me" id="myBtn"> 
</div> 
<script type="text/javascript"> 
    var btn = document.getElementById("myBtn"); 
    btn.onclick = function(){ 
        document.getElementById("myDiv").innerHTML = "Processing..."; 
    } 
</script>
 

應該改成下面：

<div id="myDiv"> 
<input type="button" value="Click me" id="myBtn"> 
</div> 
<script type="text/javascript"> 
var btn = document.getElementById("myBtn"); 
btn.onclick = function(){ 
btn.onclick = null; 
document.getElementById("myDiv").innerHTML = "Processing..."; 
} 
</script> 
 

或者採用事件委託

<div id="myDiv"> 
<input type="button" value="Click me" id="myBtn"> 
</div> 
<script type="text/javascript"> 
document.onclick = function(event){ 
event = event || window.event; 
if(event.target.id == "myBtn"){ 
document.getElementById("myDiv").innerHTML = "Processing..."; 
} 
} 
</script> 

2，

var a=document.getElementById("#xx"); 
var b=document.getElementById("#xxx"); 
a.r=b; 
b.r=a; 

var a=document.getElementById("#xx"); 
a.r=a; 

對於純粹的 ECMAScript 物件而言，只要沒有其他物件引用物件 a、b，也就是說它們只是相互之間的引用，那麼仍然會被垃圾收集系統識別並處理。但是，在 Internet Explorer 中，如果迴圈引用中的任何物件是 DOM 節點或者 ActiveX 物件，垃圾收集系統則不會發現它們之間的迴圈關係與系統中的其他物件是隔離的並釋放它們。最終它們將被保留在記憶體中，直到瀏覽器關閉。

3，

var elem = document.getElementById('test'); 
elem.addEventListener('click', function() { 
alert('You clicked ' + elem.tagName); 
}); 

這段程式碼把一個匿名函式註冊為一個DOM結點的click事件處理函式，函式內引用了一個DOM物件elem，就形成了閉包。這就會產生一個迴圈引用，即：DOM->閉包->DOM->閉包…DOM物件在閉包釋放之前不會被釋放；而閉包作為DOM物件的事件處理函式存在，所以在DOM物件釋放前閉包不會釋放，即使DOM物件在DOM tree中刪除，由於這個迴圈引用的存在，DOM物件和閉包都不會被釋放。可以用下面的方法可以避免這種記憶體洩露

var elem = document.getElementById('test'); 
elem.addEventListener('click', function() { 
alert('You clicked ' + this.tagName); // 不再直接引用elem變數 
}); 

4，

function bindEvent() 
{ 
var obj=document.createElement("XXX"); 
obj.onclick=function(){ 
//Even if it's a empty function 
} 
} 

閉包非常容易構成迴圈引用。如果一個構成閉包的函式物件被指定給，比如一個 DOM 節點的事件處理器，而對該節點的引用又被指定給函式物件作用域中的一個活動（或可變）物件，那麼就存在一個迴圈引用。
DOM_Node.onevent -

function bindEvent() 
{ 
var obj=document.createElement("XXX"); 
obj.onclick=onclickHandler; 
} 
function onclickHandler(){ 
//do something 
} 

或者在定義事件處理函式的外部函式中，刪除對dom的引用（題外，《JavaScript權威指南》中介紹過，閉包中，作用域中沒用的屬性可以刪除，以減少記憶體消耗。）

function bindEvent() 
{ 
var obj=document.createElement("XXX"); 
obj.onclick=function(){ 
//Even if it's a empty function 
} 
obj=null; 
} 

5，

a = {p: {x: 1}}; 
b = a.p; 
delete a.p; 

執行這段程式碼之後b.x的值依然是1.由於已經刪除的屬性引用依然存在，因此在JavaScript的某些實現中，可能因為這種不嚴謹的程式碼而造成記憶體洩露。所以在銷燬物件的時候，要遍歷屬性中屬性，依次刪除。

6，自動型別裝箱轉換
別不相信，下面的程式碼在ie系列中會導致記憶體洩露

var s=”lalala”; 
alert(s.length); 

s本身是一個string而非object，它沒有length屬性，所以當訪問length時，JS引擎會自動建立一個臨時String物件封裝s，而這個物件一定會洩露。這個bug匪夷所思，所幸解決起來相當容易，記得所有值型別做.運算之前先顯式轉換一下：

var s="lalala"; 
alert(new String(s).length); 

7、某些DOM操作
IE系列的特有問題 簡單的來說就是在向不在DOM樹上的DOM元素appendChild；IE7中，貌似為了改善記憶體洩露，IE7採用了極端的解決方案：離開頁面時回收所有DOM樹上的元素，其它一概不管。