javascript - 当前浏览器中的闭包和 (jQuery) DOM 事件导致内存泄漏？

Question

我是 javascript 的新手，在追踪内存泄漏时似乎遇到了一些问题。由于代码相当复杂，我已将其缩小到似乎会导致内存泄漏的部分。我将发布一个不同的示例，该示例将其简化但会导致相同的问题(只是小得多)。

Code Example

基本上，我有一些动态构建 HTML 并将事件附加到 HTML 的代码。每次 AJAX 请求都会重建 HTML。第一次这一切都很好，但在每次 AJAX 请求之后，浏览器内存都会增加(并不总是相等的)!可以通过在 jsfiddle 上多次单击运行并观察浏览器内存来重现此问题。我的假设是创建的闭包永远不会被垃圾收集，但我不确定？如果是这种情况，是否有更好的方法来执行此操作而不会导致任何问题的闭包？

这发生在 FF8、最新版本的 Chrome 和 IE 8 中。最有可能的是所有其他 - 正是我测试过的。

我在代码中添加了一些注释，应该会有帮助。

谢谢!

编辑:好的，在使用 sIEve 进行更多研究之后，我可以看到每次 AJAX 调用时 DOM 节点的数量都会翻倍。我已经更新了这个例子来模拟这个。所以我的问题是为什么在调用 jQuery empty 或 remove 函数后 DOM 元素没有被垃圾收集？我还遍历了 stuff 中的元素，解除了事件处理程序的绑定(bind)，并将每个 DOM 元素 js 引用设置为 null 而没有影响...

Code Example

Answer 1

这与 DOM 的 GC 和 JavaScript GC 不是 friend 有关。基本要点是，如果某物被 DOM 引用，JS GC 可能不会销毁它，反之亦然。这个想法可能已经过时了，因为它出现在 Crockford 的书中，这本书已经有几代浏览器了。

我在这里看到一些潜在的问题，这些问题可能是 JS Fiddle 特有的，但也可能不是:

• 是否需要分配F？
• 您在这里一次创建大量 DOM 元素，
• 您在每次运行时都重新创建 F，因此 DOM 的 GC 比 JavaScript 的 GC 更有可能出现问题
• JavaScript 的 GC 是一种标记清除扫描器，这意味着它是“惰性的”。您可以在脚本中看到这一点 - 如果您运行它十次，内存使用率会飙升到非常高的水平，但最终被遗弃的对象会被垃圾回收，内存使用率会下降。
• 您需要担心的闭包是分配给 click 元素的闭包，但您在这里没有使用闭包。

但我没有看到任何真正的问题，几分钟后我的内存使用率恢复正常。

简而言之，您没有内存泄漏(至少是紧迫的泄漏)，您的 JS 解释器的 GC 只是懒惰。您放弃了很多 DOM 元素，这是不好的，也是您的内存激增的原因，但这是短期的性能影响，而不是长期的页面加载问题。