在chrome dev工具中查找JS内存泄漏

Question

如果某些JS代码中存在内存泄漏,我正在使用chrome dev工具来解决问题.该内存的时间表看起来不错内存预期被回收.

但是,内存快照令人困惑,因为它似乎存在泄漏,因为"Detached DOM Tree"下有条目.

"分离的DOM树"下的东西是等待垃圾收集还是这些真正的漏洞？

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

Answer 1

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

简单的例子:

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

a现在引用一个已断开连接的元素,当a它仍在范围内时,它不能是GC'd .

如果分离的dom树在内存中持续存在,那么你就会继续引用它们.使用jQuery这样做有点容易,只需保存对遍历结果的引用并保留它.例如:

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

现在引用了跨度,即使它看起来无论如何都没有引用它们.parents通过jQuery .prevObject属性间接保持对所有跨度的引用.这样做parents.prevObject会给出引用所有跨度的对象.

请参见此处的示例http://jsfiddle.net/C5xCR/6/.尽管它不直接出现该跨度会被引用,它们实际上是由引用的parents全局变量,你可以看到在分离的DOM树1000个跨度永远不会消失.

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

delete parents.prevObject

你可以看到跨度不再在分离的dom树中,或者在任何地方.http://jsfiddle.net/C5xCR/7/

Answer 2

"分离的DOM树"下的东西是等待垃圾收集还是这些真正的漏洞？

在拍摄快照之前,浏览器将运行垃圾收集并清除所有未引用的对象.因此堆快照始终只包含活动对象.因此,如果分离的DOM树位于快照中,则树中必须存在从JavaScript引用的元素.

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

在同一个分离的DOM树中应该有一个元素(或其中几个)具有黄色背景.这些元素是从JavaScript代码引用的.您可以找出哪些确切地引用了保留器树中的元素.