javascript - 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/