fragment vs. appendChild vs. innerHTML (v12)

Revision 12 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];

Test runner

Ready to run.

Testing in
TestOps/sec
documentFragment
while (n = dfTarget.firstChild) {
  dfTarget.removeChild(n);
}

df_nodes = content.cloneNode(true);

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

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
while (n = innerHtmlTarget.firstChild) {
  innerHtmlTarget.removeChild(n);
}

innerHtmlTarget.innerHTML = innerHtml;
ready

Revisions

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