createDocumentFragment vs appendChild on non-appended element with complicated structure (v10)

Revision 10 of this benchmark created on

Setup

HTML = '<article class="newarticle"><div class="floatL"><a href="http://www.theverge.com/2012/6/28/3123778/google-io-samsung-chromebox"><div class="shadowbox"><img src="http://cdn2.sbnation.com/entry_photo_images/4502718/verge-googleio-lb-4760_large_large.jpg" alt="via d35lb3dl296zwu.cloudfront.net"></div></a></div><h2 class="title"><span style="height: 1em; display: inline-block; width: 20px;"></span><a href="http://www.theverge.com/2012/6/28/3123778/google-io-samsung-chromebox">Google I/O attendees get free Samsung Chromeboxes,&nbsp;too</a></h2><div class="newtextbox"><div class="smallbox"><p>Stuck around for day two of Google I/O? You getting a Samsung Chromebox.This is in addition to... < /p></div > < /div><div class="byline newbyline"><div class="floatL newheatbox"><a href="http:/ / www.theverge.com / 2012 / 6 / 28 / 3123778 / google - io - samsung - chromebox#comments " class="heat4 newheat ">67</a></div><div class="heat4 floatL newflag "></div><div class="floatL newinfobox "><a href="http: //www.theverge.com/users/ohnorosco" class="author">Ross MillerNaNJune  28, 2012 02:11 pm</a></div></div><a onclick="; return false" href="#" class="pushbox"><div></div><div class="heat4 heatpush"></div></a><p class="categories"></p></article>';

Test runner

Ready to run.

Testing in
TestOps/sec
Normal Append
var form = document.createElement('form');
document.body.appendChild(form);

for (var i = 0; i < 100; i++) {
  var inp = document.createElement('input');
  inp.innerHTML = HTML;
  form.appendChild(inp);
}

document.body.removeChild(form);
ready
Document Fragment
var form = document.createElement('form');
document.body.appendChild(form);

var frag = document.createDocumentFragment();

for (var i = 0; i < 100; i++) {
  var inp = document.createElement('input');
  inp.innerHTML = HTML;
  frag.appendChild(inp);
}

form.appendChild(frag);

document.body.removeChild(form);
ready
Normal Append Last
var form = document.createElement('form');

for (var i = 0; i < 100; i++) {
  var inp = document.createElement('input');
  inp.innerHTML = HTML;
  form.appendChild(inp);
}

document.body.appendChild(form);
document.body.removeChild(form);
ready
documentFragment childNode
var form = document.createElement('form');
document.body.appendChild(form);

var frag = document.createDocumentFragment();

for (var i = 0; i < 100; i++) {
  frag.appendChild(document.createElement('input'));
  frag.lastChild.innerHTML = HTML;
}

form.appendChild(frag);

document.body.removeChild(form);
ready
documentFragment cloneNode innerHTML
var form = document.createElement('form');
document.body.appendChild(form);

var frag = document.createDocumentFragment();
var input = document.createElement('input');

for (var i = 0; i < 100; i++) {

  frag.appendChild(input.cloneNode(false));
  frag.lastChild.innerHTML = HTML;
}

form.appendChild(frag);

document.body.removeChild(form);
ready
Normal Append cloneNode then innerHTML
var form = document.createElement('form');
document.body.appendChild(form);

var input = document.createElement('input');

for (var i = 0; i < 100; i++) {
  form.appendChild(input.cloneNode(false));
  form.lastChild.innerHTML = HTML;
}

document.body.removeChild(form);
ready
Normal Append after cloneNode innerHTML
var form = document.createElement('form');
document.body.appendChild(form);

var input = document.createElement('input');

for (var i = 0; i < 100; i++) {
  var clone = input.cloneNode(false);
  clone.innerHTML = HTML;
  form.appendChild(clone);
}

document.body.removeChild(form);
ready
normal append outerHTML
var form = document.createElement('form');
document.body.appendChild(form);

for (var i = 0; i < 100; i++) {
  var inp = document.createElement('input');
  inp.outerHTML = HTML;
  form.appendChild(inp);
}

document.body.removeChild(form);
ready

Revisions

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