颜色对于Chrome Heap Profiler中分离的DOM节点意味着什么? [英] What do the colours mean for detached DOM nodes in the Chrome Heap Profiler?

问题描述

当使用Chrome devtools分析堆快照时，我似乎无法弄清楚查看分离的DOM树时颜色的含义. red& and有什么区别?黄色?

When analyzing heap snapshots using Chrome devtools, I can't seem to figure out what the colours mean when viewing Detached DOM Trees. What is the difference between red & yellow?

推荐答案

有一个很好的解释摘自文章:

红色节点没有JavaScript对其的直接引用，但是 之所以活着，是因为它们属于独立的DOM树.可能有一个 JavaScript引用的树中的节点(可能是闭包或 变量)，但同时阻止了整个DOM树 被垃圾收集.

Red nodes do not have direct references from JavaScript to them, but are alive because they’re part of a detached DOM tree. There may be a node in the tree referenced from JavaScript (maybe as a closure or variable) but is coincidentally preventing the entire DOM tree from being garbage collected.

但是，黄色节点确实具有直接 来自JavaScript的引用.在同一个分离的地方寻找黄色节点 DOM树，用于查找JavaScript中的引用.应该有一个 从DOM窗口到元素的一系列属性(例如window.foo.bar [2] .baz).

Yellow nodes however do have direct references from JavaScript. Look for yellow nodes in the same detached DOM tree to locate references from your JavaScript. There should be a chain of properties leading from the DOM window to the element (e.g window.foo.bar[2].baz).

这篇关于颜色对于Chrome Heap Profiler中分离的DOM节点意味着什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！