Finding JS memory leak in chrome dev tools

Question

I’m using the chrome dev tools to work out if there is a memory leak in some JS code. The memory timeline looks good with memory being reclaimed as expected.

However, the memory snapshot is confusing because it appears like there is a leak because there are entries under “Detached DOM Tree”.

Is the stuff under “Detached DOM Tree” just waiting to be garbage collected or are these real leaks?

Also does anyone know how to find out what function is holding on to a reference to a detached element?

Answer 1

Those elements are being referenced in your code but they are disconnected from the page's main DOM tree.

Simple example:

var a = document.createElement("div"); 

a references a disconnected element now, it cannot be GC'd when a is still in scope.

If the detached dom trees persist in memory then you are keeping references to them. It is somewhat easy with jQuery to do this, just save a reference to a traversed result and keep that around. For example:

var parents = $("span").parent("div"); $("span").remove(); 

Now the spans are referenced even though it doesn't appear you are referencing them anyhow. parents indirectly keeps references to all the spans through the jQuery .prevObject property. So doing parents.prevObject would give the object that references all the spans.

See example here http://jsfiddle.net/C5xCR/6/. Even though it doesn't directly appear that the spans would be referenced, they are in fact referenced by the parents global variable and you can see the 1000 spans in the Detached DOM tree never go away.

Now here's the same jsfiddle but with:

delete parents.prevObject 

And you can see the spans are no longer in the detached dom tree, or anywhere for that matter. http://jsfiddle.net/C5xCR/7/

Answer 2

Is the stuff under “Detached DOM Tree” just waiting to be garbage collected or are these real leaks?

Before taking snapshot the browser will run garbage collection and sweep all objects that are not referenced. So the heap snapshot always contain only live objects. As a consequence if a Detached DOM Tree is in the snapshot than there must be an element in the tree that is referenced from JavaScript.

Also does anyone know how to find out what function is holding on to a reference to a detached element?

There should be an element(or several of them) in the same detached DOM tree that has yellow background. Such elements are referenced from the JavaScript code. You can find out who exactly keeps reference to the element in the retainers tree.