fragment vs. appendChild vs. innerHTML (v10)

Revision 10 of this benchmark created on

Description

Test which method is fastest to append multiple elements to DOM

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="content" style="display: none;">
  <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>
    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>
    20
  </div>
  <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>
    30
  </div>
  <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>
    40
  </div>
  <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>
    50
  </div>
</div>
<div>
  <h5>
    DocumentFragment
  </h5>
  <div id="df-target">
  </div>
</div>
<div>
  <h5>
    appendChild
  </h5>
  <div id="appendchild-target">
  </div>
</div>
<div>
  <h5>
    innerHTML
  </h5>
  <div id="innerhtml-target">
  </div>
</div>

Setup

content   = $('#content')[0];
    innerHtml = content.innerHTML;
    df        = document.createDocumentFragment();
        
    dfTarget          = $('#df-target')[0];
    appendChildTarget = $('#appendchild-target')[0];
    innerHtmlTarget   = $('#innerhtml-target')[0];
    
    while (n = dfTarget.firstChild) {
      dfTarget.removeChild(n);
    }
    
    df_nodes = content.cloneNode(true);
    
    while (n = df_nodes.firstChild) {
      df.appendChild(n);
    }
    
    while (n = innerHtmlTarget.firstChild) {
      innerHtmlTarget.removeChild(n);
    }

Test runner

Ready to run.

Testing in
TestOps/sec
documentFragment
// async test
dfTarget.appendChild(df);
ready
appendChild
while (n = appendChildTarget.firstChild) {
  appendChildTarget.removeChild(n);
}

appendChild = content.cloneNode(true);

while (n = appendChild.firstChild) {
  appendChildTarget.appendChild(n);
}
ready
innerHTML
innerHtmlTarget.innerHTML = innerHtml;
ready

Revisions

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