JavaScript垃圾回收（三）——内存泄露

2017-11-08 940

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

一、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();
        }