What do the colours mean for detached DOM nodes in the Chrome Heap Profiler?

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

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 2

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.