Non-Leak Memory

  ;(function (){ var $el = {tag: 'div', dom: null} $el.dom = document.getElementById('test') // JS Engine Object references to DOM Element $el.dom.attachEvent('click', onclick) // DOM Element references to JS Engine Object // 此時還沒形成circular references }()) function onclick(){} // onclick方法體內(nèi)沒有引用$el 

3.3. Cross-page Leaks（當前頁面內(nèi)存泄漏）

由于節(jié)點建立聯(lián)系時會尋找scope，若沒有則創(chuàng)建temporary scope，若有則拋棄原有的temporary scope采用已有的scope。

Leak Memory

   function LeakMemory() { var hostElement = document.getElementById("hostElement"); // Do it a lot, look at Task Manager for memory response  for (i = 0 ; i < 5000 ; i ++ ) { var parentDiv = document.createElement(""); var childDiv = document.createElement(""); // This will leak a temporary object parentDiv.appendChild(childDiv); hostElement.appendChild(parentDiv); hostElement.removeChild(parentDiv); parentDiv.removeChild(childDiv); parentDiv = null ; childDiv = null ; } hostElement = null ; }     Memory Leaking Insert    

當childDiv與parentDiv建立連接時，為讓childDiv能獲取parentDiv的信息，IE會創(chuàng)建temporary scope。而當將parentDiv添加到DOM tree中時，則childDiv和parentDiv均繼承document的scope，而temporary scope卻不會被GC釋放，而要等待瀏覽器刷新頁面才能清理。

Non-Leak Memory

   function CleanMemory() { var hostElement = document.getElementById("hostElement"); // Do it a lot, look at Task Manager for memory response  for (i = 0 ; i < 5000 ; i ++ ) { var parentDiv = document.createElement(""); var childDiv = document.createElement(""); // Changing the order is important, this won’t leak hostElement.appendChild(parentDiv); parentDiv.appendChild(childDiv); hostElement.removeChild(parentDiv); parentDiv.removeChild(childDiv); parentDiv = null ; childDiv = null ; } hostElement = null ; }     Clean Insert    

一直使用document scope，不會創(chuàng)建temporary scope

3.4. Pseduo-Leaks

連續(xù)創(chuàng)建多個JS Engine Object，而GC未能及時釋放內(nèi)存，其實根本就不是內(nèi)存泄漏

var tmpStr
for(var i = 0; i < 100000; ++i)
tmpStr = "test"

四、當前頁面泄漏的示例

4.1. DOM Hyperspace引起的DOM Element引用孤島

DOM Hyperspace由PPK發(fā)現(xiàn)，在IE下通過removeChild或removeNode從父節(jié)點（無論是否已加入DOM Tree）中移除節(jié)點后，會創(chuàng)建一個新的#documentFragment，并且被移除的節(jié)點的parentNode為 該#documentFragment，而該#documentFragment.firstChild為被移除的節(jié)點，因此存在DOM Element間的circular reference導致無法釋放，只有刷新頁面后才會釋放資源。

Leak Memory

var div = document.createElement('div')
document.body.appendChild(div)
div.parentNode.removeChild(div)

alert(div.parentNode) // IE8下為[Object object]，Chrome等瀏覽器為null

Non-Leak Memory

function rm(el){ if (!+'\v1'){ var d = document.createElement('div') d.appendChild(el) d.innerHTML = '' } else{ el.parentNode.removeChild(el) } }  var div = document.createElement('div') document.body.appendChild(div) rm(div)  alert(div.parentNode) // IE8下為null

4.2. 釋放Iframe沒那么簡單

iframe所占的資源有兩部分：iframe元素所占的內(nèi)存空間 和 iframe內(nèi)頁面所占的內(nèi)存空間。

內(nèi)存空間釋放步驟：

1. 釋放 iframe內(nèi)頁面所占的內(nèi)存空間

通過設置src=''或src='about:blank'來釋放內(nèi)部頁面的資源

2. 釋放 iframe元素所占的內(nèi)存空間

通過removeChild、removeNode等方法釋放iframe元素的內(nèi)存空間

ligerTab1.2.1的清除方式

var iframe = ...
iframe.src = 'about:blank'
iframe.contentWindow.document.write('')
CollectGarbage && CollectGarbage()
iframe.parentNode.removeChild(iframe)

五、IE8下連續(xù)修改IMG的src居然耗盡內(nèi)存？

由于IE8會對非原始尺寸的圖片進行抗鋸齒平滑處理，從而消耗更多的CPU和內(nèi)存資源。當圖片大小和尺寸到一定時，則會出現(xiàn)掛死的情況。（IE6、7沒有抗鋸齒平滑處理，而IE9則移除該功能）

而這種情況當然就不屬于Memory Leak啦！

題外話：

眾所周知IMG是replaced element，其width和height屬性缺省值又外部資源決定，而我們通過CSS設置的width和height屬性均是對缺省值的二次加工。

假設圖片原始尺寸為width:200px/height:400px，現(xiàn)在通過CSS設置width:100px，那么圖片將按等比例縮放為 width:100px/height:200px；但通過CSS設置width:100px/height:100px時，那么圖片則不是按等比例縮放 了。

六、監(jiān)控工具　

監(jiān)控方式多種多樣，這里大概分為兩類：

1. 當前頁面泄漏：Windows的任務管理器、Chrome->dev tools->Profiles->Take Heap Snapshot/Record Heap Allocations等等

2. 跨頁面泄漏：sIEve

操作步驟：

1. 在Address輸入框輸入網(wǎng)址，點擊Go （瀏覽網(wǎng)頁）

2. 執(zhí)行測試用例

3. 點擊about:blank按鈕（跳轉(zhuǎn)到空白頁）

4. 查看#leaks列下是否有增長，有則表示出現(xiàn)跨頁面的內(nèi)存泄漏

感謝各位的閱讀，以上就是“怎么用JS理解IE的內(nèi)存泄露”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對怎么用JS理解IE的內(nèi)存泄露這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！