append vs. innerHTML vs. fragment (v14)

Revision 14 of this benchmark created by Raymond on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Setup

var html = "<div><ul><li>df</li><li>fdf</li></ul></div>";
  var d = document.createElement('div');
  var f = document.createDocumentFragment();
  var di = document.createElement('div');
  var ule = document.createElement('ul');
  var li1 = document.createElement('li');
  li1.textContent = "df";
  ule.appendChild(li1);
  var li2 = document.createElement('li');
  li2.textContent = "fdf";
  ule.appendChild(li2);
  di.appendChild(ule);
  f.appendChild(di);
  
  document.body.appendChild(d);
  
  var $d = $(d);

Teardown



            document.body.removeChild(d);

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery append fragment
$(d).append(f);
ready
innerHTML
d.innerHTML = html;
ready
fragment
d.appendChild(f);
ready
cached $d appendChild
$d[0].appendChild(f);
ready
cached $d append
$d.append(f);
ready

Revisions

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