13

在使用 Chrome devtools 分析堆快照时,我似乎无法弄清楚查看分离的 DOM 树时颜色的含义。红色和黄色有什么区别?

在此处输入图像描述

4

3 回答 3

14

这里有一个很好的解释。

来自文章:

红色节点没有 JavaScript 对它们的直接引用,但是因为它们是分离的 DOM 树的一部分,所以它们是活跃的。树中可能有一个从 JavaScript 引用的节点(可能作为闭包或变量),但巧合的是,它阻止了整个 DOM 树被垃圾收集。

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

于 2013-05-28T11:39:18.683 回答
2

我还没有找到明确的答案,但这似乎始终如一:

红色背景表示从闭包中的变量引用的分离的 DOM 节点。

黄色背景表示从对象的属性或数组元素引用的分离的 DOM 节点。

于 2013-01-31T16:29:41.787 回答
2

2018 年更新

在使用 Chrome v70.0.3538.77 时,我发现 Nodes 根本没有背景高亮(但所有可用的文档仍然引用它),所以我在 Twitter 上询问了 Chromium 开发团队。

从 Mathias Bynens本人看来,旧版本的 Chrome 在某些情况下也有未突出显示的引用(尽管这不适用于我的新版本 Chrome):

在旧版本的 Chrome 中,像这样未突出显示的引用意味着该对象没有window通过 JS 对象指向该对象的路径,这意味着它由系统对象或 DOM 保留。

他跟进了这条推文

颜色确实很混乱!最新的稳定版 Chrome [Tweet 于 2018 年 11 月 9 日发送;由于这个原因,应该在 Chrome v70 左右] 不再显示颜色,而是在悬停图标时显示带有解释的图标。

他在这条推文中提供了新演示格式的屏幕截图。

新的演示格式

于 2018-11-12T11:28:36.793 回答