fragment vs. appendChild vs. innerHTML (v8)

Revision 8 of this benchmark created by Paul Comanici (darkyndy) on

Description

Test which method is fastest to append multiple elements to DOM ~~~ simple JavaScript - without any library

Preparation HTML

<div id="content">
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div>
    3
  </div>
  <div>
    4
  </div>
  <div>
    5
  </div>
  <div>
    6
  </div>
  <div>
    7
  </div>
  <div>
    8
  </div>
  <div>
    9
  </div>
  <div>
    10
  </div>
</div>
<div id="target">
</div>

Setup

content = document.getElementById('content');
    target = document.getElementById('target');
    
    function testInnerHtml() {
      target.innerHTML = content.innerHTML;
    }
    
    function testAppendChild() {
      var appendChild = content.cloneNode(true),
          n;
    
      while (n = appendChild.firstChild) {
        target.appendChild(n);
      }
    }
    
    function testDocumentFragment() {
      var df = document.createDocumentFragment(),
          df_nodes = content.cloneNode(true),
          n;
    
      while (n = df_nodes.firstChild) {
        df.appendChild(n);
      }
    
      target.appendChild(df);
    }

Teardown


    document.getElementById('target').innerHTML = "";

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
testInnerHtml()
ready
appendChild
testAppendChild()
ready
documentFragment
testDocumentFragment()
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.