js記憶體外洩的幾種情況詳細探討_javascript技巧

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

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

複製程式碼 程式碼如下:

var btn = document.getElementById("myBtn ");
btn.onclick = function(){
document.getElementById("myDiv").innerHTML = "Processing...";

} 要改成下面

複製程式碼


程式碼如下:

document.getElementById("myDiv").innerHTML = "Processing.. .";
}

或者採用事件委託

複製代碼

程式碼如下:

div>

}
}

2、

複製程式碼

程式碼如下:


var a=document.getElementById（" xx");

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

b.r=a;

複製程式碼

程式碼如下:

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

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

複製程式碼

程式碼如下:


var elemget document. '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>//Even>//Even>//Even>//Even>/ if it's a empty function
}
}

閉包很容易構成循環引用。如果一個構成閉包的函數物件被指定給，例如一個DOM 節點的事件處理器，而對該節點的引用又被指定給函數物件作用域中的一個活動（或可變）對象，那麼就存在一個循環引用。 DOM_Node.onevent -形成這樣一個循環引用是輕而易舉的，而且稍微瀏覽一下包含類似循環引用代碼的網站（通常會出現在網站的每個頁面中），就會消耗大量（甚至全部）系統內存。 解道，將事件處理函數定義在外部，解除閉包

複製程式碼


程式碼如下:


function bindEvent()

{
var obj=document.createElement("XXX");
obj.onclick=onclickHandler;

} obj.onclick=onclickHandler; } function //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樹上的元素，其它一概不管。