innerHTML vs DOMParser

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 <div>tata</div> <br/> tete';

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

Revisions

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