Vanilla render performance test

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 => {
  let s = '<div class="task">'
  if (!task.done) {
    s += '<button>Check</button>'
  } else {
    s += '<button>Remove</button>'
  }
  if (task.editing) {
  	s += '<span class="task">' + task.text + '</span>'
  } else {
    s += '<input value="' + task.text + '">'
    s += '<button>Save</button>'
  }
  return s + '</div>'
}

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

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