最近開發的時候對頁面使用了定時的局部更新,結果在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>