DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> IE8 內存洩露(內存一直增長 )的原因及解決辦法
IE8 內存洩露(內存一直增長 )的原因及解決辦法
編輯:關於JavaScript     

最近開發的時候對頁面使用了定時的局部更新,結果在ie6,7和Firefox下,一切正常,而在ie8下過上幾個小時就浏覽器就崩潰了,顯示是內存溢出,我以為是代碼寫的不好導致內存洩露,但是ie6,7又正常,調查了一下,原來這是ie8的bug。

問題點

在IE8中,生成特定Dom節點所占用的內存是不會被釋放的,即使這些節點被刪除內存也不會被釋放。

內存洩露的節點類型包括:form、button、input、select、textarea、a、img和objec

其他的大部分節點類型是不會洩露的,例如:span、div、p、table等等。

此問題只發生在IE8,其他浏覽器不發生。

如果用戶按了F5,IE8會重新刷新頁面,首先它會unload window.top,這時候會釋放掉內存。如果頁面是iframe,則unload此iframe,沒有任何反應。看起來只有window.top被 unload,內存才會被釋放。

例子

例1

執行下面的代碼,IE8就會洩露內存。

function leak1() { 
var node = document.getElementById("TO_AREA"); 
node.innerHTML = "<img />"; 
node.innerHTML = ""; 
node = null; 
} 

注意:

* 此例子添加了節點,所以會洩露。

* 在中有個div,id為“TO_AREA”。

* 提醒一下,這裡沒有閉包和循環引用。

例2

下面的代碼沒有使用innerHTML,但是還是會洩露

function leak2() { 
var node = document.getElementById("FROM_AREA").cloneNode(true); 
node.id = "NEW_AREA"; 
document.body.appendChild(node); 
document.body.removeChild(node); 
node = null; 
}

注意:

* FROM_AREA 是form的id,而且這裡也沒有閉包和循環引用。

例3

這是最簡單,最直接的例子:

function leak4() { 
var node = document.createElement("IMG"); 
document.body.appendChild(node); 
document.body.removeChild(node); 
}

注意:

* 如果用span來代替img,就不會有洩露了。

這些例子只在IE8中洩露內存,我在Windows XP, Windows Vista, Windows Server 2008, Windows Server 2008 R2和Windows 7 中的IE8都作了測試,而且使用了IE8中的IE7兼容模式和標准模式,每種情況下都會洩露。

測試頁面

關於洩露

內存大小隨著時間的推移而增長,但這並不直接導致浏覽器崩潰。浏覽器使用的內存好像是有上限的,它似乎會從某些內部手段來限制DHTML使用的內存。

內存到達上限後,浏覽器會自動處理,例如彈出對話框,顯示內存不足。

經過自己測試發現 IFrame同樣存在這個問題(在IE8下)

補充:iframe內存釋放

Ext 核心開發人員Jack的回答是,TabPanelItem在關閉時並不會對自定義到tab中的元素做特殊處理,這部分工作必須在控件外來完成。另一方面, 相關資料稱IE在iframe元素的回收方面存在著bug,在通常情況下應該將該元素的src屬性值修改為”abort:blank”,並手工將其從 DOM樹上移除,然後把腳本中引用它的變量置空並調用CollectGarbage()就可以避免iframe不能正常回收所造成的內存洩露。

<script>
function clearRAM() {
var frame = document.getElementById("ifr_content");
frame.src = 'about:blank';
frame.contentWindow.document.write( '');//清空frame的內容
frame.contentWindow.document.clear();
frame.contentWindow.close(); //避免frame內存洩漏
if (navigator.userAgent.indexOf('MSIE') >= 0) {
if (CollectGarbage) {
CollectGarbage(); //IE 特有 釋放內存
//刪除原有標記
var tags = document.getElementById("ifrSet");
tags.removeChild(frame);
//添加frameset框架
var _frame = document.createElement('frame');
_frame.src = '';
_frame.name = 'content';
_frame.id = 'ifr_content';
tags.appendChild(_frame);
}
}
}
//主動釋放 5秒一次
setInterval( function() {
if (navigator.userAgent.indexOf('MSIE') >= 0) {
if (CollectGarbage) {
//alert(1)
CollectGarbage(); //IE 特有 釋放內存
}
}
}, 5000) 
</ script>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved