Trying to get my head around the heap profiler in Chrome Developer Tools. I see several reachable objects in the snapshot, some of them have yellow background and some not. What does it mean? What's the difference?
Color legend is not exactly helpful in this case, since it has a yellow background itself (wtf).
Ok, turns out yellow background means that the object that has it has a JavaScript handle on it, or so to say is accessible from the JavaScript, while object with no background (or white) is not accessible from JavaScript, but can still be reached from the root of the graph.
The most interesting though seems to be an object with red background. Red background means that the object that has it is part of detached DOM tree. So it is basically a DOM element that is not reachable from the root node, but is referenced by some other object that on it's turn is accessible from JavaScript (has yellow background that is).
Short quote from great write-up by Addy Osmani:
Q: I noticed a number of DOM nodes in the heap snapshot where some are highlighted in red and indicated as a "Detached DOM tree" whilst others are yellow. What does this mean?
You'll notice nodes of a few different colors. Red nodes do not have direct references to JavaScript from 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 to 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).
