一、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内存泄漏

 posted on 2014-10-15 09:38  咖啡机(K.F.J)  阅读(1555)  评论(0编辑  收藏  举报