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

Question

我目前正在开发一个纯 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;
    }
});

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

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

1) 如何识别哪些闭包使给定的分离 DOM 对象保持事件状态(在 Firefox 或 Chrome 中)？

2) 假设确定了完整的闭包集，是否需要执行除清空变量之外的任何操作以确保标记 DOM 元素以进行垃圾回收？

3) 我还注意到页面存储的数组列表很大，并且包含对 GC 未收集的 DOM 元素的引用。是否有从 javascript 中清除数组并允许将所有元素标记为删除的记录最佳实践？ (注意:这是内存泄漏源的当前主要嫌疑人)

Answer 1

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

至于#2，可能还有其他问题。如果变量 v1 引用的对象关闭了某些函数的自由变量，则删除 v1 将不足以使它们符合垃圾回收条件，如果另一个变量 v2 在一些其他函数中关闭 v1。所以我想如果你真的是指“完整的闭包集”，那么你应该准备好了。但这可能会变得毛茸茸。同样，如果大多数对象仅在狭窄范围内具有引用，那么这些问题就不那么严重了。

对于 #3，您讨论的是什么类型的数组？如果它是 jQuery 集合，那么可能只是因为它们太多了。我知道让它们长期存在的唯一原因是将事件处理程序绑定(bind)到它们，而这几乎总是通过父元素上的事件委托(delegate)来更好地处理。如果它是您自己的自定义数组，您真的有充分的理由将对它们的引用存储在持续任意长时间的数组中吗？我很少找到。