<html>
<head>
<title>Chrome DevTools: DOM Node Count Test (10/2013)</title>
<style>
body,
button {
	font-family: helvetica, verdana, arial;
	font-size: 100%;
	font-weight: 300;
}
h2 {
	margin-top: 1.5em;
}
div {
	position: relative;
}
div > div {
	display: inline-block;
	width: 4px;
	height: 4px;
	xbackground: #ff33ff;
	margin-right: 1px;
	margin-bottom: 1px;
}
div > div.gpu {
	/* do the GPU thing. Applying this causes the DOM Node Count to retain these nodes, even after GC. However, they are not shown in the heap snapshot under DOM nor Detached DOM. */
	-ms-transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
ol li {
	margin-bottom: 1em;
}
</style>
</head>

<body>

<h1>Chrome DevTools: DOM Node Count Test</h1>

<p>Possible bug in Timeline &rarr; Memory &rarr; Counters &rarr; DOM Node Count pane on OS X?</p>

<p>Theory: GPU / hardware-accelerated layers may not be removed from the DOM Node Count pane on OS X after proper garbage collection.</p>

<p>Screenshots and detail in <a href="http://www.flickr.com/photos/schill/sets/72157636225189756/">this Flickr set</a>.</p>

<p>Chromium ticket <a href="https://code.google.com/p/chromium/issues/detail?id=304689">#304689</a>.</p>

<div>
 <button id="makestuff" onclick="makeStuff(false)">Create nodes</button> | <button id="destroystuff" onclick="destroyStuff()">Destroy nodes</button> | <button id="makestuffgpu" onclick="makeStuff(true)">Create nodes (w/CSS transform)</button>
</div>

<h2>Test case</h2>

<ol>
 <li>Load page with Chrome DevTools open, go to <i>Timeline &rarr; Memory</i> view and start recording.</li>
 <li>Click the <b>Create nodes</b> button perhaps 10 times. Memory use will increase as DOM nodes and JS objects are created.</li>
 <li>Click <b>Destroy nodes</b> to remove DOM nodes and JS &rarr; DOM references.</li>
 <li>Click the trash can (collect garbage) icon in Chrome DevTools. Memory use and DOM Node Count should decrease.</li>
 <li>Repeat the process, clicking <b>Create nodes (w/CSS transform)</b>, followed by <b>Destroy nodes</b> and then the trash can in Chrome DevTools. Observe that memory use drops, but DOM Node Count may not in this case.</li>
</ol>

<h2>Example Screenshots</h2>

<p>Timelines showing effects of creation, removal + GC of regular nodes, followed by nodes with -webkit-transform: translate3d() applied.</p>

<div style="display:inline-block;vertical-align:top;width:550px">
 <b>Windows XP</b>: Expected behaviour.
 <p>
  <a href="http://www.flickr.com/photos/schill/10105220756/in/set-72157636225189756" title="Chrome DevTools (WinXP), Timeline Memory View - DOM Node Count by Schill, on Flickr"><img src="http://farm4.staticflickr.com/3816/10105220756_d0f59915db.jpg" width="500" height="289" alt="Chrome DevTools (WinXP), Timeline Memory View - DOM Node Count"></a>
 </p>
</div>

<div style="display:inline-block;vertical-align:top;width:450px">
 <b>OS X</b>: GPU-accelerated layers remain in DOM Node Count after GC, despite memory decrease + lack of Disconnected DOM in Heap Snapshots.
 <p>
  <a href="http://www.flickr.com/photos/schill/10104024006/in/set-72157636225189756" title="Chrome DevTools, OS X: Timeline → Memory → DOM Node Count bug(?) triggered by GPU-accelerated elements by Schill, on Flickr"><img src="http://farm8.staticflickr.com/7438/10104024006_48c83fa4d6.jpg" width="438" height="500" alt="Chrome DevTools, OS X: Timeline → Memory → DOM Node Count bug(?) triggered by GPU-accelerated elements"></a>
 </p>
</div>

<h3>General Disclaimer</h3>

<p>"AFAIK", hardware acceleration involves a bit of black magic and support can vary. I'm not familiar with the details, but applying CSS transforms seems to trigger the DOM Node Count behaviour on OS X.</p>

<p>Observed on Chrome Canary 32.0.1661.0 on OS X 10.8.5. Originally posted October 5th, 2013.</p>

<div id="foo">
</div>

<script>

(function() {

  var things = [],
      counter = 0;

  function makeStuff(useGPU) {

    var i, j, node, fragment;

    console.log('Making nodes ' + (useGPU ? ' with CSS transform ' : ' without CSS transform'));

    for (i=0, j=100; i<j; i++) {
      node = document.createElement('div');
      if (useGPU) {
        node.className = 'gpu';
      }
      node.id = '_' + counter;
      counter++;
      things.push(node);
      document.getElementById('foo').appendChild(node);
    }

    console.log('Node count: ' + things.length);

  }

  function destroyStuff() {

    // remove nodes
    document.getElementById('foo').innerHTML = '';

    // remove references to DOM
    things = [];

    console.log('Node count: ' + things.length);

  }

  window.makeStuff = makeStuff;
  window.destroyStuff = destroyStuff;

}());

</script>

</body>
</html>