javascript - 在 chrome 开发工具中查找 JS 内存泄漏

Question

我正在使用 chrome 开发工具来确定某些 JS 代码中是否存在内存泄漏。 内存时间轴看起来不错，内存按预期回收。

但是，内存快照 令人困惑，因为它看起来像是泄漏，因为“分离的 DOM 树”下有条目。

“Detached DOM Tree”下的东西是在等待垃圾回收还是这些是真正的泄漏？

还有谁知道如何找出哪个函数持有对分离元素的引用？

Answer 1

这些元素在您的代码中被引用，但它们与页面的主 DOM 树断开连接。

简单的例子:

var a = document.createElement("div");

a 现在引用一个断开连接的元素，当 a 仍在范围内时，它不能被 GC。

如果分离的 dom 树持久存在于内存中，那么您将保留对它们的引用。使用 jQuery 可以很容易地做到这一点， 只需保存对遍历结果的引用并保留它。例如:

var parents = $("span").parent("div");
$("span").remove();

现在这些跨度被引用了，即使看起来您并没有引用它们。 parents 间接保留引用 通过 jQuery .prevObject 属性的所有范围。所以执行 parents.prevObject 会给出引用所有跨度的对象。

请参阅此处的示例 http://jsfiddle.net/C5xCR/6/ .即使没有直接显示 span 会被引用， 它们实际上由 parents 全局变量引用，您可以看到 Detached DOM 树中的 1000 个跨度永远不会消失。

现在这里是相同的 jsfiddle，但具有:

delete parents.prevObject

而且您可以看到 span 不再位于分离的 dom 树中，或任何地方。 http://jsfiddle.net/C5xCR/7/