append vs. innerHTML vs. fragment (v31)

Revision 31 of this benchmark created 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');
  document.body.appendChild(d);

Teardown



            document.body.removeChild(d);

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery append
$(d).append(html);
ready
innerHTML
d.innerHTML = html;
ready
fragment
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);
d.appendChild(f);
ready
fragment 2
var f = document.createDocumentFragment();
var di = document.createElement('div');
di.innerHTML = html;
f.appendChild(di);
d.appendChild(f);
ready

Revisions

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