google-chrome - Chrome堆分析器中对象标题的黄色背景是什么意思？

Question

试图了解 Chrome 开发人员工具中的堆分析器。我在快照中看到了几个可到达的对象，其中一些具有黄色背景，而另一些则没有。这是什么意思？有什么不同？

在这种情况下，颜色图例并不完全有用，因为它本身具有黄色背景 (wtf)。

Answer 1

好的，原来黄色背景意味着拥有它的对象上有一个 JavaScript 句柄，或者可以说可以从 JavaScript 访问，而没有背景（或白色）的对象不能从 JavaScript 访问，但仍然可以访问从图的根。

最有趣的似乎是一个带有红色背景的物体。红色背景意味着拥有它的对象是分离的 DOM 树的一部分。所以它基本上是一个 DOM 元素，它不能从根节点访问，但被其他一些对象引用，而这些对象又可以从 JavaScript 访问（具有黄色背景）。

Addy Osmani精彩文章的简短引述：

问：我注意到堆快照中有一些 DOM 节点，其中一些以红色突出显示，并表示为“分离的 DOM 树”，而另一些则为黄色。这是什么意思？

您会注意到几种不同颜色的节点。红色节点没有从它们那里直接引用 JavaScript，但是因为它们是分离的 DOM 树的一部分，所以它们是活跃的。树中可能有一个从 JavaScript 引用的节点（可能作为闭包或变量），但巧合的是，它阻止了整个 DOM 树被垃圾收集。

然而，黄色节点确实直接引用了 JavaScript。在同一个分离的 DOM 树中查找黄色节点以定位 JavaScript 中的引用。应该有一个从 DOM 窗口到元素的属性链（例如window.foo.bar[2].baz）。