innerHTML vs DOMParser (v4)

Revision 4 of this benchmark created on

Description

compare the performance of the simple innerHTML implementation with that of a more complex function using DOMParser.

Preparation HTML

<script>
const parser = new DOMParser();
const fragment = document.createDocumentFragment();

const parseFromString = (html) => {
  const doc = parser.parseFromString(html, 'text/html');
  const container = fragment.cloneNode();
  while (doc.body.firstChild) {
    container.appendChild(doc.body.firstChild);
  }
  return container;
};

const container = document.createElement('div');
const test = 'toto';
const textNode = document.createTextNode('');
</script>

Setup

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
container.innerHTML = test;
ready
DOMParser
container.appendChild(parseFromString(test));
ready
TextNode
const node = textNode.cloneNode();
node.nodeValue = test;
container.appendChild(node);
ready

Revisions

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