google-chrome - Chromeのヒーププロファイラーでオブジェクトのタイトルにある黄色の背景は何を意味しますか?

Question

Chrome Developer Tools のヒープ プロファイラーについて頭を悩ませようとしています。スナップショットに到達可能なオブジェクトがいくつか表示されます。背景が黄色のものとそうでないものがあります。どういう意味ですか？違いは何ですか？

この場合、背景自体が黄色であるため (wtf)、色の凡例はまったく役に立ちません。

Answer 1

黄色の背景は、JavaScript ハンドルを持っているオブジェクト、つまり JavaScript からアクセスできることを意味しますが、背景のない (または白の) オブジェクトは JavaScript からアクセスできませんが、それでもアクセスできます。グラフのルートから。

最も興味深いのは、赤い背景を持つオブジェクトのようです。赤い背景は、それを持つオブジェクトが分離された DOM ツリーの一部であることを意味します。したがって、これは基本的にルートノードから到達できないDOM要素ですが、JavaScriptからアクセスできる他のオブジェクトによって参照されます(黄色の背景があります)。

Addy Osmani による素晴らしい記事からの短い引用:

Q: ヒープ スナップショットに多数の DOM ノードがあることに気付きました。一部は赤で強調表示され、「分離された DOM ツリー」として示されていますが、他のノードは黄色で示されています。これは何を意味するのでしょうか？

いくつかの異なる色のノードに気付くでしょう。赤のノードは、そこから JavaScript への直接参照を持っていませんが、切り離された DOM ツリーの一部であるため、生きています。JavaScript から (おそらくクロージャまたは変数として) 参照されるツリーにノードがあるかもしれませんが、偶然にも DOM ツリー全体がガベージ コレクションされるのを妨げています。

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