fragment vs. appendChild vs. innerHTML (v3)

Revision 3 of this benchmark created by Jarno Keskikangas 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">
  <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>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>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>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>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>10</div>
</div>

<div id="df-target"></div>
<div id="appendchild-target"></div>
<div id="innerhtml-target"></div>

Setup

content           = $('#content')[0];
    innerHtml         = content.innerHTML;
    
    dfTarget          = $('#df-target').empty()[0];
    appendChildTarget = $('#appendchild-target').empty()[0];
    innerHtmlTarget   = $('#innerhtml-target').empty()[0];

Test runner

Ready to run.

Testing in
TestOps/sec
documentFragment
df       = document.createDocumentFragment();
df_nodes = content.cloneNode(true);

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

dfTarget.appendChild(df);
ready
appendChild
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.