sIEve简介

图 2. sIEve 主窗口
 

单击 Show in use 时，这个工具非常有用的。您将看到使用的所有 DOM 节点，包括孤立节点和 DOM 节点增加或减少的引用。

图 3 是一个样例视图。泄露的原因如下：

• 孤立节点，在 Orphan 这一列被标记为 “YES” 。
• 对 DOM 节点增加的不正确引用，显示蓝色。

使用 sIEve 找到泄露节点并查看修复它们的代码。

图 3. sIEve：使用的 DOM 节点
 

使用 sIEve 找到泄露节点

通过以下步骤检测泄露节点。

1. 通过您的 web 应用程序的 URL 启动 sIEve。
2. 单击 Scan Now 寻找当前文档中使用的所有 DOM 节点（可选）。
3. 单击 Show in use 查看所有 DOM 节点。在这里，所有节点将以红色标识（新条目），因为您刚刚开始。
4. 使用 web 应用程序的一些功能，测试是否有泄漏。
5. 单击 Scan Now 刷新使用的 DOM 节点（可选）。
6. 单击 Show in use。现在，视图中含有一些有趣的信息。可在此找到孤立节点，或者对某个 DOM 节点的异常引用不断增加。
7. 分析报告并检查您的代码。
8. 必要时，重复步骤 4-8。

sIEve 不能找出您的应用程序中的所有泄露，但是它能找出由子节点造成的泄露。其他的一些信息，例如 ID 和 outerHTML 可以帮助您指出泄露节点。查看控制泄露节点的代码并相应的作出修改。

      sIEve 界面很简单，左侧：内嵌了一个浏览器控件，我可以访问任何网址，下方还有个内存检查，这样我们可以方便看出内存的升降情况以及dom使用数量曲线。

      右侧面板，我们可以通过 Show in use 看到目前页面使用的dom的情况，Show Leaks 可以看到内存泄露的dom。当然每次显示泄露的情况必须是页面刷新后，看到上一个页面的泄露情况。同时通过右侧的数据颜色，我们可以看到内存的升降和具体的数量级

            

       不过sIEve的工作原理是对所有dom进行了一次hack,然后自己判断那些dom没有被释放掉，但是具体的情况比较难分析出来。而且跟踪有问题的dom需要一定技巧，对于大型的应用程序，跟踪难度大。

      不过用来检测小模块的内存使用情况还是一个不错的选择，特别是大项目模块细分后，对每个模块的单独测试还是比较不错的