title: Why is documentFragment no faster than repeated DOM access?
body: <p>I was always under the impression that rather than touching the DOM repeatedly, for performance reasons, we should use a <code>documentFragment</code> to append multiple elements to, and then append the fragment into the document once, rather than just repeatedly appending new elements one-by-one into the DOM.</p>
  
  <p>I've been trying to use Chrome's dev tools to profile these two approaches, using this test page:</p>
  
  <pre><code>&lt;button id="addRows"&gt;Add rows&lt;/button&gt;
  &lt;table id="myTable"&gt;&lt;/table&gt;
  </code></pre>
  
  <p>Test 1 uses this code to append 50000 new rows to the table:</p>
  
  <pre><code>let addRows = document.getElementById('addRows');
  addRows.addEventListener('click', function () {
      for (let x = 0; x &lt; 50000; x += 1) {
          let table = document.getElementById('myTable'),
              row = document.createElement('tr'),
              cell = document.createElement('td'),
              cell1 = cell.cloneNode(),
              cell2 = cell.cloneNode(),
              cell3 = cell.cloneNode();
  
          cell1.textContent = 'A';
          cell2.textContent = 'B';
          cell3.textContent = 'C';
  
          row.appendChild(cell1);
          row.appendChild(cell2);
          row.appendChild(cell3);
          table.appendChild(row);
      }
  });
  </code></pre>
  
  <p>Clicking the button while recording in Chrome's Timeline tool results in the following output:</p>
  
  <p><a href="https://i.stack.imgur.com/ewHhc.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ewHhc.png" alt="Repeated DOM interaction"></a></p>
  
  <p>Test 2 uses this code instead:</p>
  
  <pre><code>let addRows = document.getElementById('addRows');
  addRows.addEventListener('click', function () {
      let table = document.getElementById('myTable'),
          cell = document.createElement('td'),
          docFragment = document.createDocumentFragment();
  
      for (let x = 0; x &lt; 50000; x += 1) {
          let row = document.createElement('tr'),
              cell1 = cell.cloneNode(),
              cell2 = cell.cloneNode(),
              cell3 = cell.cloneNode();
  
          cell1.textContent = 'A';
          cell2.textContent = 'B';
          cell3.textContent = 'C';
  
          row.appendChild(cell1);
          row.appendChild(cell2);
          row.appendChild(cell3);
  
          docFragment.appendChild(row);
      }
  
      table.appendChild(docFragment);
  });
  </code></pre>
  
  <p>This has a performance profile like this:</p>
  
  <p><a href="https://i.stack.imgur.com/zR2Xf.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zR2Xf.png" alt="enter image description here"></a></p>
  
  <p>The second, supposedly much faster alternative to the first, actually takes longer to run! I've run these tests numerous times and sometimes the second approach is slightly faster, and sometimes, as these images show, the second approach is slightly slower, but not once has there been any significant difference between the two approaches.</p>
  
  <p>What is happening here? Are browsers optimized so well now that this makes no difference anymore? Am I using the profiling tools incorrectly?</p>
  
  <p>I'm on Windows 10, with Chrome 57.0.2987.133</p>