JS魔法堂：再识IE的内存泄露

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　

公司主营业务：网站设计、网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出桓仁免费做网站回馈大家。

IE6~8除了不遵守W3C标准和各种诡异外，我想最让人诟病的应该是内存泄露的问题了。这阵子趁项目技术调研的机会好好的再认识一回，以下内容若有纰漏请大家指正，谢谢！

目录一大坨！

二、内存泄漏到底是哪里漏了？

2.1. JS Engine Object、DOM Element 和 BOM Element

2.2. JS Engine Object的内存回收机制

2.3. DOM Element的内存回收机制

2.4. 两种泄漏方式

三、4种泄漏模式

3.1. Circular References

3.2. Closures

3.3. Cross-page Leaks

3.4. Pseduo-Leaks

四、当前页面泄漏的示例

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

4.2. 释放Iframe没那么简单

五、IE8下连续修改IMG的src居然耗尽内存？

六、监控工具

七、总结

八、参考

#p#

二、内存泄漏到底是哪里漏了？　　　　　　　　　　　　　　　　　　

SPA跑久了页面响应速度剧减又被用户投诉，搪塞说句“IE是比较容易发生内存泄漏，刷刷页面就好”。那真的是刷刷页面就能释放泄漏了的内存吗？下面我们一起来探讨一下！

内存泄漏：内存资源得不到释放 && 失去对该内存区的指针 => 无法复用内存资源，最终导致内存溢出

2.1. JS Engine Object、DOM Element 和 BOM Element

Script中我们能操作的对象可分为三种：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的，因此也就有可能发生内存泄漏的问题。

2.2. JS Engine Object的内存回收机制　

IE的JScript Garbage Collector采用的是Mark-and-Sweep算法，当执行垃圾回收时会先遍历所有JS Engine Object并标记未被引用的对象，然后释放掉被标记的内存空间。

由于Mark-and-Sweep算法的缘故，也能很好地释放引用孤岛的内存空间。

而IE下独有的CollectGarbage()则用于回收无引用或引用孤岛的JS Engine Object。

2.3. DOM Element的内存回收机制

当DOM Element不再被引用时会被回收，但具体被谁何时回收则有待研究了。

2.4. 两种泄漏方式

a. 当前页面泄漏：刷新页面或跳转到其他页面就能释放的内存资源。

b. 跨页面泄漏：刷新页面或跳转到其他页面也无法释放的内存资源。

当前页面泄漏处理难度相对简单，跨页面泄漏才是处理大头。

#p#

三、4种泄漏模式

下面是Justin Rogers总结出来的4种会引起泄漏的反模式。

3.1. Circular References(导致跨页面内存泄漏)

循环引用可谓是引起内存泄漏的根本原因，其他的泄漏模式***层还是因为出现的循环引用。

Leak Memory

var $el = {tag: 'div', dom: null} // 创建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不会清理$el，而页面刷新时也不会清理$el.dom

setTimeout('location.reload()', 500) // 刷新页面

Non-Leak Memory

闭包具有Lexical scope特性，延长了方法参数和局部变量的生命周期，但同时又容易在无意当中引入循环引用的问题。

;(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方法体内没有引用$el

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

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

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