Vanilla render performance with create element

by Hajime Yamasaki Vukelic

HTML

<div id="root">

</div>

Babel + JSX

let i = 0
const t = []

const lap = label => {
  const start = new Date().getTime()
  return () => {
    console.log(label, 'took', new Date().getTime() - start, 'ms')
  }
}


const endAll = lap('all')
const endData = lap('data')
while (i < 10000) {
	t.push({created: new Date().getTime(), done: false, editing: Math.random() < 0.5, text: 'Task' + i})
  i += 1
}
endData()


const renderItem = task => {
  const div = document.createElement('div')
  div.className = 'task'
  const btn = document.createElement('button')
  div.appendChild(btn)
  if (!task.done) {
    btn.innerText = 'Check'
  } else {
    btn.innerTetx = 'Remove'
  }
  if (task.editing) {
  	const sp = document.createElement('span')
    sp.innerText = task.text
    div.appendChild(sp)
  } else {
  	const input = document.createElement('input')
    input.value = task.text
    div.appendChild(input)
    const btn2 = document.createElement('button')
    btn2.innerText = 'Save'
    div.appendChild(btn2)
  }
  return div
}

const endUI = lap('ui build')
const ui = (() => {
  const div = document.createElement('div')
  const l = t.length
  for (let i = 0; i < l; i += 1) {
    div.appendChild(renderItem(t[i]))
  }
  return div
})()
endUI()

const endRender = lap('render')
document.querySelector('#root').appendChild(ui)
endRender()
endAll()