这些颜色对Chrome Heap Profiler中分离的DOM节点意味着什么？

Question

使用Chrome devtools分析堆快照时，我似乎无法弄清楚查看Detached DOM Trees时颜色的含义。 red＆amp;和red之间有什么区别？黄色？

Answer 1

有一个很好的解释available here。

来自文章：

  

红色节点没有JavaScript直接引用它们，但是   因为它们是分离的DOM树的一部分而存活。可能有一个   从JavaScript引用的树中的节点（可能是一个闭包或   变量）但巧合地阻止了整个DOM树   被垃圾收集。

     

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

Answer 2

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

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

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

Answer 3

2018年更新

在使用Chrome v70.0.3538.77时，我发现Nodes根本没有突出显示背景（但是所有可用的文档仍然引用了它），所以I asked在Chromium开发团队的推特上。

From Mathias Bynens本人，听起来旧版本的Chrome在某些情况下也没有突出显示引用（尽管这不适用于我的较新版本的Chrome）：

  

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

他跟进了this tweet：

  

颜色确实令人困惑！最新的稳定版Chrome [Tweet，于2018年11月9日发送；应该位于Chrome v70左右]，因此不再显示颜色，而是将鼠标悬停在图标上并显示说明。

他在this tweet中提供了新演示文稿格式的屏幕截图。