小说排行榜,小说排行榜完结版,古风小说君子以泽

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

JS魔法堂：再識(shí)IE的內(nèi)存泄露

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　

公司主營(yíng)業(yè)務(wù)：網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出桓仁免費(fèi)做網(wǎng)站回饋大家。

IE6~8除了不遵守W3C標(biāo)準(zhǔn)和各種詭異外，我想最讓人詬病的應(yīng)該是內(nèi)存泄露的問(wèn)題了。這陣子趁項(xiàng)目技術(shù)調(diào)研的機(jī)會(huì)好好的再認(rèn)識(shí)一回，以下內(nèi)容若有紕漏請(qǐng)大家指正，謝謝！

目錄一大坨！

二、內(nèi)存泄漏到底是哪里漏了？

2.1. JS Engine Object、DOM Element 和 BOM Element

2.2. JS Engine Object的內(nèi)存回收機(jī)制

2.3. DOM Element的內(nèi)存回收機(jī)制

2.4. 兩種泄漏方式

三、4種泄漏模式

3.1. Circular References

3.2. Closures

3.3. Cross-page Leaks

3.4. Pseduo-Leaks

四、當(dāng)前頁(yè)面泄漏的示例

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

4.2. 釋放Iframe沒(méi)那么簡(jiǎn)單

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

六、監(jiān)控工具

七、總結(jié)

八、參考

#p#

二、內(nèi)存泄漏到底是哪里漏了？　　　　　　　　　　　　　　　　　　

SPA跑久了頁(yè)面響應(yīng)速度劇減又被用戶投訴，搪塞說(shuō)句“IE是比較容易發(fā)生內(nèi)存泄漏，刷刷頁(yè)面就好”。那真的是刷刷頁(yè)面就能釋放泄漏了的內(nèi)存嗎？下面我們一起來(lái)探討一下！

內(nèi)存泄漏：內(nèi)存資源得不到釋放 && 失去對(duì)該內(nèi)存區(qū)的指針 => 無(wú)法復(fù)用內(nèi)存資源，最終導(dǎo)致內(nèi)存溢出

2.1. JS Engine Object、DOM Element 和 BOM Element

Script中我們能操作的對(duì)象可分為三種：JS Engine Object、DOM Element 和 BOM Element。

JS Engine Object： var obj = Object(); var array = [];等等

DOM Element： var el = document.createElement('div'); var div = document.getElementById('name');等等

BOM Element： window; window.location;等等

其中只有JS Engine Object和DOM Element是我們可以CRUD的，因此也就有可能發(fā)生內(nèi)存泄漏的問(wèn)題。

2.2. JS Engine Object的內(nèi)存回收機(jī)制　

IE的JScript Garbage Collector采用的是Mark-and-Sweep算法，當(dāng)執(zhí)行垃圾回收時(shí)會(huì)先遍歷所有JS Engine Object并標(biāo)記未被引用的對(duì)象，然后釋放掉被標(biāo)記的內(nèi)存空間。

由于Mark-and-Sweep算法的緣故，也能很好地釋放引用孤島的內(nèi)存空間。

而IE下獨(dú)有的CollectGarbage()則用于回收無(wú)引用或引用孤島的JS Engine Object。

2.3. DOM Element的內(nèi)存回收機(jī)制

當(dāng)DOM Element不再被引用時(shí)會(huì)被回收，但具體被誰(shuí)何時(shí)回收則有待研究了。

2.4. 兩種泄漏方式

a. 當(dāng)前頁(yè)面泄漏：刷新頁(yè)面或跳轉(zhuǎn)到其他頁(yè)面就能釋放的內(nèi)存資源。

b. 跨頁(yè)面泄漏：刷新頁(yè)面或跳轉(zhuǎn)到其他頁(yè)面也無(wú)法釋放的內(nèi)存資源。

當(dāng)前頁(yè)面泄漏處理難度相對(duì)簡(jiǎn)單，跨頁(yè)面泄漏才是處理大頭。

#p#

三、4種泄漏模式

下面是Justin Rogers總結(jié)出來(lái)的4種會(huì)引起泄漏的反模式。

3.1. Circular References(導(dǎo)致跨頁(yè)面內(nèi)存泄漏)

循環(huán)引用可謂是引起內(nèi)存泄漏的根本原因，其他的泄漏模式***層還是因?yàn)槌霈F(xiàn)的循環(huán)引用。

Leak Memory

var $el = {tag: 'div', dom: null} // 創(chuàng)建JS Engine Object

$el.dom = document.getElementById('test') // JS Engine Object references to DOM Element

$el.dom.expandoProp = $el // DOM Element references to JS Engine Object

// 造成circular references

// GC不會(huì)清理$el，而頁(yè)面刷新時(shí)也不會(huì)清理$el.dom

setTimeout('location.reload()', 500) // 刷新頁(yè)面

Non-Leak Memory

function clearMemory(){

$el.dom.expandoProp = null; // 解除DOM Element references to JS Engine Object，那么頁(yè)面刷新時(shí)就會(huì)清除$el.dom，而$el也會(huì)被GC清除

}

var $el = {tag: 'div', dom: null} // 創(chuàng)建JS Engine Object

$el.dom = document.getElementById('test') // JS Engine Object references to DOM Element

$el.dom.expandoProp = $el // DOM Element references to JS Engine Object

// 造成circular references

// GC不會(huì)清理$el，而頁(yè)面刷新時(shí)也不會(huì)清理$el.dom

setTimeout('location.reload()', 500) // 刷新頁(yè)面

3.2. Closures(導(dǎo)致跨頁(yè)面內(nèi)存泄漏)

閉包具有Lexical scope特性，延長(zhǎng)了方法參數(shù)和局部變量的生命周期，但同時(shí)又容易在無(wú)意當(dāng)中引入循環(huán)引用的問(wèn)題。

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

// 此時(shí)還沒(méi)形成circular references

function onclick(){} // onclick的方法體內(nèi)隱式引用$el及$el內(nèi)的dom屬性，因此形成了circular refereneces

// function onclick(){ return eval('$el && true || false') } 返回true

}())

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

// 此時(shí)還沒(méi)形成circular references

}())

function onclick(){} // onclick方法體內(nèi)沒(méi)有引用$el

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

由于節(jié)點(diǎn)建立聯(lián)系時(shí)會(huì)尋找scope，若沒(méi)有則創(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

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

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，不會(huì)創(chuàng)建temporary scope

3.4. Pseduo-Leaks

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

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

#p#

四、當(dāng)前頁(yè)面泄漏的示例　　　　　　　　　　　　　　　　　　　　　　

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

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

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沒(méi)那么簡(jiǎn)單

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

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

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

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

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

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

ligerTab1.2.1的清除方式

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

#p#

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

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

而這種情況當(dāng)然就不屬于Memory Leak啦！

題外話：

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

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

#p#

六、監(jiān)控工具　　　　　　　　　　　　　　　　　　　　　　　　　　　

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

1. 當(dāng)前頁(yè)面泄漏：Windows的任務(wù)管理器、Chrome->dev tools->Profiles->Take Heap Snapshot/Record Heap Allocations等等

2. 跨頁(yè)面泄漏：sIEve

操作步驟：

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

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

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

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

七、總結(jié)　　　　　　　　　　　　　　　　　　　　　　　　　　　　

上述內(nèi)容以概念為主，最終還是要實(shí)戰(zhàn)來(lái)驗(yàn)證和完善、補(bǔ)充。

來(lái)自：肥子John^_^ http://www.cnblogs.com/fsjohnhuang/p/4455822.htm

八、參考　　　　　　　　　　　　　　　　　　　　　　　　　　　　

What are closures?

Understanding and Solving Internet Explorer Leak Patterns

JavaScript and memory leaks

分享標(biāo)題：JS魔法堂：再識(shí)IE的內(nèi)存泄露
網(wǎng)站URL：http://fisionsoft.com.cn/article/cocjcde.html

新聞中心

其他資訊