Snabbdom render performance

by Hajime Yamasaki Vukelic

HTML

<script src="https://cdn.jsdelivr.net/npm/snabbdom@0.7.1/dist/h.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/snabbdom@0.7.1/dist/snabbdom-patch.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/snabbdom@0.7.1/dist/snabbdom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/snabbdom@0.7.1/dist/snabbdom-attributes.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/snabbdom@0.7.1/dist/snabbdom-props.min.js"></script>
<div id="root">

</div>

Babel + JSX

const patch = snabbdom.init([
  snabbdom_attributes.default,
  snabbdom_props.default,
])
const h = snabbdom.h


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 => {
  return h('div', {
  	attrs: {class: 'tasks'}
  }, [
    h('button', task.done ? 'Check' : 'Remove'),
    task.editing 
    	? h('span', {attrs: {class: 'task'}}, task.text)
      : h('span', [
          h('input', {props: {value: task.text}}),
          h('button', 'Save')
        ]),
  ])
}

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

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