What do the colours mean for detached DOM nodes in

Question

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?

Answer 1

Update for 2018

When using Chrome v70.0.3538.77, I found that Nodes had no background highlight at all (yet all the documentation available still refers to it), so I asked the Chromium dev team on Twitter.

From Mathias Bynens himself, it sounds like old versions of Chrome had unhighlighted references in some cases too (although this does not apply to my newer version of Chrome):

In old versions of Chrome, an unhighlighted reference like that meant that the object didn’t have a path to the window object via JS objects, meaning it’s retained by a system object or the DOM.

He followed up with this tweet:

The colors are indeed confusing! The latest stable Chrome [Tweet sent on Nov 9th 2018; should be around Chrome v70] doesn’t show colors anymore for this reason, and instead shows icons with an explanation when you hover them.

He provided a screenshot of the new presentation format in this tweet.

Answer 2

There is a good explanation available here.

From the article:

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.

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).

Answer 3

I have not found a definitive answer, but this seems to be consistently true:

A red background indicates a detached DOM node that is referenced from a variable in a closure.

A yellow background indicates a detached DOM node that is referenced from an object's property or an array element.