innerHTML vs createRange (v2)

Revision 2 of this benchmark created on

Preparation HTML

<div id="test" style="width:500px;overflow:auto">
</div>
<script>
  var div = document.getElementById('test'),
      html = '<span>Hello</span>';
</script>

Setup

div.innerHTML = '';
    var range = document.createRange();
    range.selectNode(div);
    range = range.createContextualFragment(html);

Test runner

Ready to run.

Testing in
TestOps/sec
createRange
var r = document.createRange();
r.selectNode(div);
r = r.createContextualFragment(html);
div.appendChild(r);
ready
innerHTML (One Append)
div.innerHTML = html;
ready
innerHTML 2
div.innerHTML += html;
ready
createRange (One Append)
div.appendChild(range);
ready

Revisions

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