一、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的
用这个工具可以看到泄漏的情况，但是还不是很会用，网上很多的泄漏情况我还不能用这个工具提现出来。这个工具我也只是简单的展示用用，具体操作还需要进一步的研究。
