关于弹层引起的内存泄漏

当同事告诉我我们产品的弹出层每弹出一次会吃掉4M的内存，很震惊，我重来没关注JS性能这方面的东西。于是去查询了微软官方的资料，说得比较简单：

在IE下的JS编程中，以下的编程方式都会造成即使关闭IE也无法释放内存的问题，下面分类给出：
1、给DOM对象添加的属性是一个对象的引用。范例：

var MyObject = {};

document.getElementById(‘myDiv’).myProp = MyObject;

解决方法：

在window.onunload事件中写上: document.getElementById(‘myDiv’).myProp = null;

2、DOM对象与JS对象相互引用。范例：

function Encapsulator(element) {

this.elementReference = element;

element.myProp = this;

}

new Encapsulator(document.getElementById(‘myDiv’));

解决方法：

在onunload事件中写上: document.getElementById(‘myDiv’).myProp = null;

3、给DOM对象用attachEvent绑定事件。范例：

function doClick() {}

element.attachEvent(“onclick”, doClick);

解决方法：

在onunload事件中写上: element.detachEvent(‘onclick’, doClick);

4、从外到内执行appendChild。这时即使调用removeChild也无法释放。范例：

var parentDiv = document.createElement(“div”);

var childDiv = document.createElement(“div”);

document.body.appendChild(parentDiv);

parentDiv.appendChild(childDiv);

解决方法：

从内到外执行appendChild:

var parentDiv = document.createElement(“div”);

var childDiv = document.createElement(“div”);

parentDiv.appendChild(childDiv);

document.body.appendChild(parentDiv);

5、反复重写同一个属性会造成内存大量占用(但关闭IE后内存会被释放)。范例：

for(i = 0; i < 5000; i++) {

hostElement.text = “asdfasdfasdf”;

}

这种方式相当于定义了5000个属性！

解决方法：

其实没什么解决方法:P~~~就是编程的时候尽量避免出现这种情况咯~~

而在我们的实际应用中，主要问题是它说到的第2点：DOM对象与JS对象相互引用。同事的弹窗做法是：先动态创建3个外层的DIV（id=pannel等,用途为拖拽）；接着通过AJAX将范围的SUCESS的HTML代码赋值到最里面的DIV。当点关闭按钮的时候，再REMOVE掉整个外层DIV。

方法一：当时我自己的想法是给所以的pannel在remove前都赋值为NULL；尝试后未果。

方法二：同事给我的解决方案是：外层的3个DIV放在页面上去显示隐藏控制，不要动态创建；尝试后未果。

方法三：后来得到高手夏老板相助，他的解决方案是第一次仍旧按原来的方式创建容器，之后通过 hide() , show() 而不是 动态删除 , 创建的方式去控制弹层。经测试，OK了，内存的增长由4M变成了10多K；o(∩_∩)o 哈哈，再次感谢。

口说无凭，附我做的静态小DEMO，有些丑，请大家比较global.js和globalold.js。

原来的：http://jianfeng88.cn/yxq/demo/4m/page.html

修改后的：http://jianfeng88.cn/yxq/demo/4m/page2.html

附上检查JS的内存泄露工具sIEve及当时发现问题的截图，





教程转载http://www.javaeye.com/topic/172891（感谢原作者哦）在IE下监控页面内存资源和dom节点(sIEve软件使用简介)