The DevTools docs have moved! For the latest tutorials, docs and updates head over to the new home of Chrome DevTools.

Uncovering DOM Leaks

This page demonstrates how leaking of DOM nodes can be uncovered using the Heap Profiler.

Below is the source code of the script, for reference:

function start()
{
  var p = document.getElementById("p");
  detached = document.createElement("div");
  p.appendChild(detached);
  p.removeChild(detached);
  fill();
}

function fill()
{
  for (var i = 0; i < 25; ++i) {
    var div = document.createElement('div');
    div.data = new Array(10000);
    for (var j = 0, l = div.data.length; j < l; ++j)
      div.data[j] = j.toString();
    detached.appendChild(div);
  }
}

Try this:

  • Take a heap snapshot
  • Open the Summary view
  • Find the Detached DOM tree entry, expand it
  • Alternatively, open the Containment view
  • Expand the (Native objects) entry, locate the Detached DOM tree entry there

In this example, a DOM node is detached from the tree, but it still holds DOM wrapper objects (HTMLDivElement objects) that reference script data, effectively preventing the data from being collected.

DOM trees can be found in Summary and Containment views. Note that the number of entries displayed for DOM subtrees is the number of native DOM nodes it contains, not the number of wrapper objects it holds.

By tracing paths to window objects, it can be observed, that the detached DOM tree is referenced as the native link from the DOM wrapper stored in the detached window property. To confirm this, do the following:

  • Expand the Detached DOM tree entry
  • Click on any of its HTMLDivElement descendants
  • Select to window objects on the top of the Retaining paths view