createElement + appendChild vs innerHTML vs createDocumentFragment + createElement + appendChild vs createContextualFragment + appendChild vs DOMParser + adoptNode + appendChild vs insertAdjacentHTML(BeforeEnd) (v3)

Revision 3 of this benchmark created on

Preparation HTML

<script src="https://gist.github.com/felixlaumon/dde49230c7d839dc7967/raw/bbbf5a952d79ceb69cbc616f3796864bda7297f9/testStr.js"></script>

<div id="test">
</div>
<script>
  var doc, test;

  doc = document;
  test = doc.getElementById('test');

  if (!test) {
    test = doc.body.appendChild(doc.createElement('div'));
    test.id = 'test';
  }
</script>

Teardown


    test.innerHTML = "";

Test runner

Ready to run.

Testing in
TestOps/sec
test.appendChild(doc.createElement('div'));
ready
innerHTML
test.innerHTML += window.testStr;
ready
test.appendChild(
doc.createDocumentFragment().appendChild(
doc.createElement('div')));
ready
createContextualFragment + appendChild
var range;

range = doc.createRange();

range.selectNodeContents(doc.body);
test.appendChild(range.createContextualFragment(window.testStr));
range.detach();
ready
test.appendChild(
doc.adoptNode((new DOMParser()).parseFromString('<div></div>', 'text/xml').documentElement));
ready
insertAdjacentHTML(BeforeEnd)
test.insertAdjacentHTML('BeforeEnd', window.testStr);
ready
createHTMLDocument + adoptNode + appendChild
var doc = document.implementation.createHTMLDocument('');
doc.documentElement.innerHTML = window.testStr;
test.appendChild(
doc.adoptNode(doc.documentElement));
ready

Revisions

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