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，接下来的演示都是使用这个工具。

　右下脚表格每列的头代表如下：

1. usage 内存使用
2. delta 内存增减。绿色是内存减少，红色是内存增加
3. #inUse 在使用的 HTML 节点，比如 div
4. #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内存泄漏