innerHTML vs DOMParser (v3)

Revision 3 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 src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.9/purify.min.js"></script>
<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('');

document.body.appendChild(container);
</script>

Setup

Test runner

Ready to run.

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

Revisions

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