sIEve 调试js内存泄露

sIEve项目是为了是为了发现和解决由于Internet Explorer中垃圾回收器（garbage collector）的容量限制所引起的内存泄露问题。例如执行AJAX这样的应用程序时，将会给浏览器带来很大的压力。Internet Explorer在内存管理方面表现的并不是很好，话句话说，在处理JavaScript和DHTML的操作时，很容易发生一系列的内存泄露问题。

主界面主要指标介绍：

1、Address：需要执行的URL地址，即需要进行测试的地址。

2、Auto Refresh：正在执行的URL将会自动进行刷新。在内存使用列表和图表中，你可以查看是否在你的程序中仍然存在内存泄露。“Auto Refresh”按钮将会变为“Stop”，点击“Stop”将会取消“自动刷新模式”。

3、Clear in use：已注册并正在工作的DOM元素列别将会被清空，实际上所有的元素将会在“Elements in use”对话框中被隐藏。

4、Show in use：显示所有正在使用的DOM元素。

5、Show leaks：显示所有到现在为止已发现的内存泄露问题，

6、Memory Samples List：这里将包括所有的内存样本。其中虚拟内存大小也包含在列表中。样本中红色表示内存使用增加，绿色表示内存使用减小，黑色表示与前一个内存样本相比，无变化。重新输入URL或进入自动刷新状态都将会清空此列表。

7、Usage：所占用内存，单位为：KB

8、Delta：与前一个内存样本相比，相差的内存占用量。

9、Avg：“Delta”的平均值，内存使用量中大的起伏将会导致不可预料的结果。

10、#inUse：已注册的DOM元素数量

11、#hidden：在“clear in use”中隐藏的DOM元素数量

12、Sloa/Fast/Paused：内存样本图像和列表的更新速度，Slow更新时长为5秒，Fast为1秒，Paused则暂停更新。

 

“In Use/Leak Dialog”界面中元素介绍：

1、#：自动为已注册的元素产生的序列号

2、doc：自动为已经注册的问题特别产生的序列号，其作用是当几个相同URL同时运行时可以辨别和查看。

3、Refs：所涉及到的元素数量

4、Tag：已注册元素的DOM节点名，例如TD/TR/DIV等。

5、ID：DOM元素的ID属性值。

6、Orphan：如果这一列的值为“YES”，则表明这个元素不附属于document.body中(即页面的BODY中)。在IE中，这种元素会导致内存泄露，应给予高度的关注。

7、outerHTML：显示输出地HTML。

8、New Item：表示为红色，显示新增加的项目。

   Increased refcount：表示为蓝色，项目不为新，但此项目涉及到的元素有增加。

   Decrease refcount：表示为绿色，项目不为新，但此项目涉及到的元素有减少。

先注明一下: 这篇文章只是讲解 在IE下如何利用 sIEve(一个drip的加强版) 来发现 内存泄露和内存回收问题, 
而不是讲解关于 IE的内存管理和内存泄露原理的文章. 
关于IE的内存管理和内存泄露的更多知识还麻烦大家自行google了. 

sIEve  是 一个帮助我们查看ie浏览器(他本身基于操作系统安装的ie内核)内存的使用和内存泄露问题的. 
它可以: 

Java代码  

1. 1 列出当前页面内所有dom节点的基本信息(html id style 等)  
2. 2 页面内所有dom节点的高级信息 (内存占用,数量,节点的引用)  
3. 3 可以查找出页面中的孤立节点  
4. 4 可以查找出页面中的循环引用  
5. 5 可以查找出页面中产生内存泄露的节点  

更详细的帮助文档见: 
http://home.orange.nl/jsrosman/sievehelp.htm 

我下面只是简单介绍一下 

请大家先下载附件里的 演示文件 和 sIEve 软件 
运行后, 在上面的address栏内输入 要测试的页面地址 如 file:///D:/mydev/ie_mem/test_ie.html 
出现下图: 
(图) 
[img] http://fins.iteye.com/upload/picture/pic/9572/3418653e-a0c3-3e50-95db-7f13c8774daa.jpg[/img] 

下端是内存变化的曲线图 右上角是各种功能按钮 

右下角是页面内的信息(很重要),该列表自动定时刷新. 5列信息依次是: 

内存总体占用量(单位kb) 
和上次列表自动刷新时相比,变化的量 
当前的dom节点数目 
产生内存泄露的节点数目 
日志信息(节点发生异常时记录一些信息 不常用) 

下面开始看一下他是如何使用的 


1 ie下不好的移除节点的方式  
点击测试页面的"_removeNode div_1"按钮 
大家可以看到 div被从页面内移除, 但是看右面的信息列表里 "当前的dom节点数目"并没用变化 

点击右上角的功能按钮: show in use. 
这时候大家可以在弹出的窗口内 看到 id=div_1 的节点 是孤立状态 而没有被回收 (还有两个孤立节点 大家不用管) 
(图) 
 

2 ie下更好的移除节点的方式  
关掉弹出的窗口, 点击 测试页面的"removeElement div_2"按钮, div_2被移除 而且"当前的dom节点数目"减少 
查看show in use. 大家可以看到 div_2及其子节点已经被真的移除了. 

上面两个试验演示了如何查看孤立节点,  同时说明了第二种移除节点的方法更有效. 

3 循环  
关掉弹出的窗口, 点击 测试页面的"createCycle div_3"按钮, 
然后点击右上角的功能按钮: scan now. (旁边的那个自动检查cycle选项有问题 我这里选上后常常会报错)  
然后再点show in use. 查看使用中的节点. 
大家可以看到 div_3节点 形成了 Cycle ,同时看后面的outerHTML大致可以分析出循环的原因. 
( style节点也会被当作 循环引用, 不知道是ie的问题还是这个软件的问题 ,反正大家没必要在意style) 
(图) 
 

4 内存泄露  
关掉弹出的窗口, 点击 测试页面的"createMemLeak div_4"按钮. 
之后页面会自动刷新. 大家可以在右边列表里看到 leaks的数量增加了 
点击 show leaks 就可以看到内存泄露的点在哪里了 
(图) 
 


最后补充一下,在弹出的窗口里 还可以做查看节点的更多信息 (双击节点) 

以上只是这个工具的大致用法 
更详细的帮助文档请见: 
http://home.orange.nl/jsrosman/sievehelp.htm 
这个软件似乎很久没更新了  不知道大家还有什么 好的类似的工具 推荐呢? 
如果有 记得告诉我一下 谢谢了 先