profiling - Chrome ヒープ プロファイラでデタッチされた DOM ノードの色は何を意味しますか?

Question

Chrome devtools を使用してヒープ スナップショットを分析しているときに、Detached DOM Trees を表示したときに色が何を意味するのか理解できないようです。赤と黄の違いは？

Answer 1

ここで利用可能な良い説明があります。

記事から：

赤のノードは JavaScript から直接参照されていませんが、独立した DOM ツリーの一部であるため、生きています。JavaScript から (おそらくクロージャまたは変数として) 参照されるツリーにノードが存在する可能性がありますが、偶然にも DOM ツリー全体がガベージ コレクションされるのを妨げています。

ただし、黄色のノードには JavaScript からの直接参照があります。同じ切り離された DOM ツリーで黄色のノードを探して、JavaScript からの参照を見つけます。DOM ウィンドウから要素につながる一連のプロパティが必要です (例: window.foo.bar[2].baz)。

Answer 2

決定的な答えは見つかりませんでしたが、これは一貫して正しいようです。

赤い背景は、クロージャ内の変数から参照されている切り離されたDOMノードを示します。

黄色の背景は、オブジェクトのプロパティまたは配列要素から参照されている分離されたDOMノードを示します。