4 ms·
Author here, nice to see this got some interest! As a very small benchmark (uh-oh!), in a console on the linked page, I tried to make/recreate 10,000 divs: c
by leontrolski 7y ago
Author here, nice to see this got some interest! As a very small benchmark (uh-oh!), in a console on the linked page, I tried to make/recreate 10,000 divs:
const root = document.getElementById('noughts')
m.render(root, {children: [...Array(10000)].map(_=>m('', {class: ['hi']}, 'hi'))})
m.render(root, {children: [...Array(10000)].map(_=>m('', {class: ['bye']}, 'bye'))})
wrapped with:
console.time('a'); ... console.timeEnd('a')
On my laptop (admittedly a fairly new macbook), I got (approx):
130ms to make divs from scratch
80ms to switch from 'hi'->'bye'
50ms to re-render with no changes
I'd be super interested as to what comparable figures would be for React. There's a fair bit of interesting discussion below surrounding performance, but with no datapoints.
- jsf01 7y agoThere are some fairly standard vdom benchmarks you could implement instead. https://github.com/krausest/js-framework-benchmark https://github.com/krausest/js-framework-benchmark https://localvoid.github.io/uibench/ https://localvoid.github.io/uibench/ Or even just something following mithril’s own benchmark suite: https://github.com/MithrilJS/mithril.js/blob/next/performance/test-perf.js https://github.com/MithrilJS/mithril.js/blob/next/performanc...
- leontrolski 7y agothanks!
- bastawhiz 7y ago50ms to rerender with no changes is quite slow. One frame is 16ms. Being able to rerender part of the render tree in ones of milliseconds is critical for most reasonable frameworks.
- retreatguru 7y agoI believe those numbers were for 10,000 divs.