在使用 Chrome devtools 分析堆快照时,我似乎无法弄清楚查看分离的 DOM 树时颜色的含义。红色和黄色有什么区别?
3 回答
这里有一个很好的解释。
来自文章:
红色节点没有 JavaScript 对它们的直接引用,但是因为它们是分离的 DOM 树的一部分,所以它们是活跃的。树中可能有一个从 JavaScript 引用的节点(可能作为闭包或变量),但巧合的是,它阻止了整个 DOM 树被垃圾收集。
然而,黄色节点确实有来自 JavaScript 的直接引用。在同一个分离的 DOM 树中查找黄色节点以定位 JavaScript 中的引用。应该有一个从 DOM 窗口到元素的属性链(例如 window.foo.bar[2].baz)。
我还没有找到明确的答案,但这似乎始终如一:
红色背景表示从闭包中的变量引用的分离的 DOM 节点。
黄色背景表示从对象的属性或数组元素引用的分离的 DOM 节点。
2018 年更新
在使用 Chrome v70.0.3538.77 时,我发现 Nodes 根本没有背景高亮(但所有可用的文档仍然引用它),所以我在 Twitter 上询问了 Chromium 开发团队。
从 Mathias Bynens本人看来,旧版本的 Chrome 在某些情况下也有未突出显示的引用(尽管这不适用于我的新版本 Chrome):
在旧版本的 Chrome 中,像这样未突出显示的引用意味着该对象没有
window
通过 JS 对象指向该对象的路径,这意味着它由系统对象或 DOM 保留。
他跟进了这条推文:
颜色确实很混乱!最新的稳定版 Chrome [Tweet 于 2018 年 11 月 9 日发送;由于这个原因,应该在 Chrome v70 左右] 不再显示颜色,而是在悬停图标时显示带有解释的图标。
他在这条推文中提供了新演示格式的屏幕截图。