innerHTML vs createElement-based DOM creation (v9)

Revision 9 of this benchmark created on

Description

Test whether the absurdly verbose document.createElement-based DOM creation is appreciably faster than the simpler innerHTML version.

In other words, whether the fastest possible template engine should attempt to compile to createElement code, or just innerHTML string concatenation.

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
var div = document.createElement('div')
div.innerHTML = "I am a div.\
  <p>This is a paragraph</p>\
  <p>This is another paragraph <b>with bold</b> text.</b></p>\
"
 
ready
insertAdjacentHTML
var div = document.createElement('div')
div.insertAdjacentHTML('afterbegin', "I am a div.\
  <p>This is a paragraph</p>\
  <p>This is another paragraph <b>with bold</b> text.</b></p>\
")
ready
createElement
var div = document.createElement('div')
div.textContent = 'I am a div.'
var p = document.createElement('p')
p.textContent = 'This is a paragraph'
div.appendChild(p)
p = document.createElement('p')
p.appendChild(document.createTextNode('This is a another paragraph '))
var b = document.createElement('b')
b.textContent = 'with bold'
p.appendChild(b)

p.appendChild(document.createTextNode(' text.'))
div.appendChild(p)
ready
createElement without textContent
var div = document.createElement('div')
div.appendChild(document.createTextNode('I am a div.'))
var p = document.createElement('p')
p.appendChild(document.createTextNode('This is a paragraph'))
div.appendChild(p)
p = document.createElement('p')
p.appendChild(document.createTextNode('This is a another paragraph '))
var b = document.createElement('b')
b.appendChild(document.createTextNode('with bold'))
p.appendChild(b)

p.appendChild(document.createTextNode(' text.'))
div.appendChild(p)
ready

Revisions

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