使用开发人员工具识别javascript闭包

我目前正在开发一个纯javascript的网站，该网站严重依赖jQuery和jQuery UI库（该网站不供一般公众使用，因此渐进增强不是本项目的严格要求）。我在执行以下代码时遇到严重的内存泄漏：

oDialogBox = $("<div>...</div>");
/* Add useful things to the dialog box here */
oDialogBox.appendTo("body");
oDialogBox.dialog({
    /* Other dialog box settings here */
    close: function(event, ui) {
        oDialogBox.dialog("destroy");
        oDialogBox.remove();
        oDialogBox = null;
    }
});

oDialogBox=$（“..”）；
/*在此对话框中添加有用的内容*/
oDialogBox.附录（“主体”）；
oDialogBox.dialog({
/*此处的其他对话框设置*/
关闭：功能（事件、用户界面）{
对话框（“销毁”）；
oDialogBox.remove（）；
oDialogBox=null；
}
});

在此对话框中的任何给定时间，我都在创建、删除和修改大量jQuery UI按钮、Multiselect（根据Eric Hynds创建的Multiselect小部件）和单击事件处理程序的实例。根据jQueryUI文档，在oDialogBox上调用.remove（）应该会导致所有子小部件被解除绑定并被删除。然而，我分离的DOM树显示了大量GC没有收集的垃圾元素

我很可能错过了一大组需要安全完成的闭包。如何执行以下操作：

1） 如何识别哪些闭包使给定的分离DOM对象保持活动状态（在Firefox或Chrome中）

2） 假设确定了完整的闭包集，那么除了将变量置零之外，还需要做什么来确保将DOM元素标记为垃圾收集

---

3） 我还注意到，我的页面存储的数组列表非常庞大，包含对GC未收集的DOM元素的引用。是否有一个文档化的最佳实践，用于从javascript清理数组并允许所有元素被标记为删除？（注意：这是当前内存泄漏源的主要嫌疑犯）

恐怕我对#1没有一个很好的答案。我自己还没有找到任何真正好的工具，即使考虑到开发工具在过去几年中已经变得多么好。我能给你的最好的建议就是尽可能把事情控制在最小的范围内。如果事情没有逃逸，通常更容易简单地找出引用必须在哪里

至于#2，可能还有更多的担忧。如果变量

v1

引用的对象关闭了某个函数的自由变量，则如果另一个变量

v2

关闭了某个其他函数中的

v1

，则删除

v1

将不足以使其符合垃圾收集的条件。所以，我想如果你真的是指“完整的闭包集”，那么你应该完全准备好了。但这可能会让人毛骨悚然。同样，如果大多数对象只在狭窄的范围内有引用，这些问题就不那么严重了

---

对于#3，您正在讨论什么类型的数组？如果是jQuery集合，那么您可能只是拥有太多的集合。据我所知，它们长时间存在的唯一原因是将事件处理程序绑定到它们，而通过父元素上的事件委托几乎总是可以更好地处理这一点。如果是您自己的自定义数组，那么您真的有理由将对它们的引用存储在持续相当长时间的数组中吗？我很少找到一个。

“包含对DOM元素引用的数组列表”-这可能是DOM元素没有被垃圾收集的原因吗？如何检查此列表？在使用chrome开发者工具时，我一直在使用探查器工具拍摄堆快照。运行测试后，堆中占用了将近50MB的额外内存。探查器将其标识为存储在“（数组）”对象中。随机检查发现分离的DOM树中元素的jQuery属性。我还发现没有收集空数组的证据。我仍在试图确定我在代码中定义的数组是否隐藏在10k+对象列表中。当我最初阅读您的回答时，我的第一反应是“不，数组是完全必要的。”但经过一晚上的思考，我实际上只是在用户点击“提交”时使用数组来维护表单数据收集的特殊div的动态列表。如果在对象和jQuery选择器上更广泛地使用类，也可以使用同样的技巧。这比DOM类轻得多，而且可能比DOM类更有针对性。