IE的一种内存泄漏
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:admin 阅读 313
内存泄漏常见的原因有三种:1.闭包2.未解除事件绑定3.循环引用DOM元素除此之外,还有一种泄漏原因少有人知,它和innerHTML有关,不过很容易解决。出现这种内存泄漏需要有三个条件:1.内存中存

内存泄漏常见的原因有三种:

1. 闭包

2. 未解除事件绑定

3. 循环引用DOM元素


除此之外,还有一种泄漏原因少有人知,它和innerHTML有关,不过很容易解决。


出现这种内存泄漏需要有三个条件:

  1. 内存中存在一个未加入DOM树的元素

  2. 给这个元素设置innerHTML,注意,必须是能创建元素并且绑定了DOM 0级事件

  3. 必须在这个元素加入DOM树前设置它的innerHTML

 
举个例子:

// 创建一个仅存在于内存中的元素  var el = document.createElement('div');  // 设置innerHTML  el.innerHTML = '<a onclick = "testFn()">Test Link</a>';  // 加入DOM树  document.body.appendChild(el)  

 

这种写法很常见对吧,但你根本察觉不到有内存泄漏。唯一的隐患在于,当你在一个相同的页面上频繁地用这种方式设置innerHTML,一次又一次,反反复复,没完没了,好吧,其实也没那么多次,总之是很多次之后,就会出现问题了。


肯定有人会说,谁那么蛋疼地总折腾一个元素,其实在ajax泛滥的时代,经常需要动态更新页面,所以这种情况也并非罕见。

如果实在不信,这里有两个DEMO页面:

泄漏DEMO     不泄露DEMO


接着来看怎么解决它:

其实很简单,换个顺序,先把元素加入DOM树,再设置innerHTML。

当然你也可以完全放弃使用innerHTML,这样做好处多多,比如不会存在未解除事件绑定的情况,但貌似完全放弃innerHTML也不现实。。。


原文

联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2