HZ UED » Blog Archive » 关于弹层引起的内存泄漏

当同事告诉我我们产品的弹出层每弹出一次会吃掉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放在页面上去显示隐藏控制,不要动态创建;尝试后未果。

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

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

原来的:

修改后的:

Leave a Reply

郑重声明:资讯 【HZ UED » Blog Archive » 关于弹层引起的内存泄漏】由 发布,版权归原作者及其所在单位,其原创性以及文中陈述文字和内容未经(企业库qiyeku.com)证实,请读者仅作参考,并请自行核实相关内容。若本文有侵犯到您的版权, 请你提供相关证明及申请并与我们联系(qiyeku # qq.com)或【在线投诉】,我们审核后将会尽快处理。
—— 相关资讯 ——