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

Question

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

颜色图例在这种情况下并不是很有帮助，因为它本身具有黄色背景 (wtf)。

Answer 1

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

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

Addy Osmani 对great write-up 的简短引用：

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

您会注意到几种不同颜色的节点。红色节点没有 从它们直接引用 JavaScript，但仍然存在，因为 它们是分离的 DOM 树的一部分。树中可能有一个节点 从 JavaScript 引用（可能作为闭包或变量），但 巧合地防止了整个 DOM 树成为垃圾 收集。

然而，黄色节点确实有对 JavaScript 的直接引用。寻找 同一分离的 DOM 树中的黄色节点，用于定位来自的引用 你的 JavaScript。应该有一系列属性从 元素的 DOM 窗口（例如 window.foo.bar[2].baz）。