fragment vs. appendChild vs. innerHTML (v17)

Revision 17 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>

<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];
    
    df_nodes = content.cloneNode(true);
    appendChild1 = content.cloneNode(true);
    appendChild2 = content.cloneNode(true);

Teardown


    while (n = dfTarget.firstChild) {
      dfTarget.removeChild(n);
    }
    while (n = appendChildTarget.firstChild) {
      appendChildTarget.removeChild(n);
    }
    while (n = innerHtmlTarget.firstChild) {
      innerHtmlTarget.removeChild(n);
    }
   

Test runner

Ready to run.

Testing in
TestOps/sec
documentFragment


while (n = df_nodes.firstChild) {
  df.appendChild(n);
}

dfTarget.appendChild(df);
ready
appendChild


while (n = appendChild1.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.