DOMParser vs innerHTML

Benchmark created on

Description

Testing what's faster to create DOM nodes - chugging stuff inside innerHTML or parsing with DOMParser. Testing only for case of single child.

Setup

const domAsText = `<div>Hello, <b data-text="Whatever">world!</b></div>`

const getViaWrapper = (text) => {
  const wrapper = document.createElement('div');
  wrapper.innerHTML = text;
  return wrapper.firstChild;
}

const parser = new DOMParser();
const getViaParser = (text) => {
  return parser.parseFromString(text, 'text/html').body.firstChild;
}

function test(node){
	if(node.querySelector('[data-text]').getAttribute('data-text') !== 'Whatever'){
  throw "Fail."
}
}

Test runner

Ready to run.

Testing in
TestOps/sec
using innerHTML
test(getViaWrapper(domAsText));
ready
using DOMParser
test(getViaParser(domAsText));
ready

Revisions

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