Document fragment vs innerHTML vs looped appendChild (v94)

Revision 94 of this benchmark created by Hikaru on

Preparation HTML

<div id="my-div"></div>

Setup

let div = document.getElementById( 'my-div' )

Teardown



            div.innerHTML = ''
  div.getBoundingClientRect( )

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML in one string
let str = ''

for ( let i = 0; i < 100; i++ ) {
  str += `<li>This is my list item number ${ i }</li>`
}

div.innerHTML = str

div.getBoundingClientRect( )
ready
Document fragment
let fragment = document.createDocumentFragment( )

for ( let i = 0; i < 100; i++ ) {
  let el = document.createElement( 'li' )
  el.innerText = `This is my list item number ${ i }`
  fragment.appendChild( el )
}

div.appendChild( fragment )

div.getBoundingClientRect( )
ready
Looped appendChild
for ( let i = 0; i < 100; i++ ) {
  let el = document.createElement( 'li' )
  el.innerText = `This is my list item number ${ i }`
  div.appendChild( el )
}

div.getBoundingClientRect( )
ready
innerHTML
for ( let i = 0; i < 100; i++ ) {
  div.innerHTHL += `<li>This is my list item number ${ i }</li>`
}

div.getBoundingClientRect( )
ready

Revisions

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