首页 > 代码库 > JavaScript垃圾回收(三)——内存泄露
JavaScript垃圾回收(三)——内存泄露
一、JavaScript内存监测工具
在讨论内存泄露之前,先介绍几款JavaScript内存监测工具。
IE的sIEve与JSLeaksDetector(这两个可以在下面的附件中下载),firefox的Leak Monitor,chrome的Porfiles等。
1、Leak Monitor好不容易找到下载链接,但是我的firefox的版本安装不了。
2、chrome的Porfiles,点击F12就能看到,如下图所示:
3、IE的JSLeaksDetector,我用的是win7系统,后面发现64位的浏览器不支持,只有打开32位的IE8才有这个插件。这插件不会用。
4、IE的sIEve,接下来的演示都是使用这个工具。
右下脚表格每列的头代表如下:
- usage 内存使用
- delta 内存增减。绿色是内存减少,红色是内存增加
- #inUse 在使用的 HTML 节点,比如 div
- #leaks 泄露的 HTML 节点,比如 div
二、循环引用
<p id="leak1"></p> <input type="button" id="btnCycle" value="循环引用" onclick="cycle_leak()"/>
var host = {mycycle:‘‘}; function cycle_leak() { var cycle = document.getElementById(‘leak1‘); host.mycycle = cycle; cycle.setAttribute(‘cycle‘, host); }
1、设置了一个变量host,它的一个属性mycycle赋值为一个id为leak1的p对象
2、设置id为leak1的p对象的一个自定义属性为host变量
通过工具来查看:
1.点击按钮循环引用
2.点击左上角的按钮scan now
3.点击左上角的按钮show in use
4.可以看到id=leak1的p标签,存在循环引用
三、闭包引起的内存泄漏
<input type="button" id="btnClosure" value="闭包" onclick="closure_leak()"/> <p id="pMemory"></p>
//闭包 function closure_leak(){ var el = document.getElementById(‘pMemory‘); el.onclick=function(){ alert(this.id); } //移除节点 if (el.removeNode) { el.removeNode(true); }else if (el.parentNode) { el.parentNode.removeChild(el); } //页面刷新 location.reload(); }
这里有一点要注意一下,我原先电脑中的是IE9,IE9已经不会出现这个问题了,后面倒退到IE8才看到泄漏。
el是一个Dom元素,el引用了它的click事件的监听函数,同样该函数通过其作用域链也引用回了el元素。具体如下:
1、closure_leak()执行时创建的作用域对象叫做ScopeA
2、ScopeA引用DOM对象el
3、DOM对象el引用函数function(){alert(this.id);}
4、函数function(){alert(this.id)}引用ScopeA
5、移除节点和页面刷新是为了在sIEve查看到泄漏节点
通过工具来查看:
1.点击按钮闭包
2.右边的Memory Usage中可以看到leaks为1
3.点击按钮Show Leaks
4.显示泄漏节点的信息,不知道为什么ID没有显示出来,我明明有ID的
用这个工具可以看到泄漏的情况,但是还不是很会用,网上很多的泄漏情况我还不能用这个工具提现出来。这个工具我也只是简单的展示用用,具体操作还需要进一步的研究。
sIEve与JSLeaksDetector工具下载:
http://download.csdn.net/download/loneleaf1/8008215
demo下载:
http://download.csdn.net/detail/loneleaf1/8031073
参考资料:
http://kb.cnblogs.com/page/74836/ GC与JS内存泄露
http://www.iteye.com/topic/172891 sIEve软件使用简介
http://blog.csdn.net/samxx8/article/details/7486372 javascript 内存监测工具
http://www.cnblogs.com/hyddd/archive/2013/02/07/2908598.html Javascript垃圾回收浅析
http://blog.jobbole.com/49084/ JavaScript 垃圾回收
http://kb.cnblogs.com/page/137723/ 减少javascript垃圾回收[译]
http://www.jianshu.com/p/84a8fd5fa0ee JavaScript内存管理
http://www.cnblogs.com/rainman/archive/2009/03/07/1405624.html JavaScript内存泄漏
http://www.blogjava.net/JAVA-HE/archive/2009/10/27/299856.html JavaScript 内存泄露
http://www.cnblogs.com/lhb25/archive/2009/08/09/1542386.html JavaScript 中的内存泄露模式
http://adamlu.com/?p=418 Javascript内存泄漏
JavaScript垃圾回收(三)——内存泄露