JS web frameworks benchmark – Round 7

This is the 2017 Pre-Christmas edition of the JS web framework benchmark. Almost as usual a few new frameworks appear in this round:

• dojo2
• RE:DOM
• etch
• petit-dom
• maquette
• vuera
• hyperhtml Update 2/3/2018: Please note that hyperhtml was incorrectly categorized as non-keyed in the results of round 7. The version 2.4 of hyperhtml performs much faster than 1.12.5 as can be seen from the snapshot of the table for the next round. Results of 1.12.5 have been removed from the table.
• lit-html
• gruu
• san.js
• Reflex-dom
• pux, thermite and halogen
• moon
• choo

Further the were new major releases for react and angular. All in all there are currently 76 framework variants in this round. A big thanks to all contributors to this round!

What’s the benchmark about?

The benchmark measures the duration for simple operations on a (unrealistic) large table with either 1,000 or 10,000 rows depending on the operation. The measurement is extracted from chrome’s timeline via browser automation and includes the time for rendering.

Links:

Why are results grouped in keyed and non-keyed?

Keyed implementations create an association between the domain data and a dom element by assigning a ‘key’. If data changes the dom element with that key will be updated. This feature might be necessary when integrating with 3rd-party libraries, transitions or when the DOM keeps some state. Non-keyed implementations are free to reuse the existing dom nodes in whatever way they like and thus might be faster, but may cause issues if there’s a dependency on the particular dom nodes.

If you want my opinion I’d only ever choose a framework that supports keyed updates, non-keyed only frameworks seem like a premature optimisation to me, but your requirements might vary.

Results

Updates results for all frameworks can be seen in the result table:

A deeper look at the keyed results

• Surplus is fastest after vanillajs and it’s really impressively close. Petit-dom, Bobril and ivi follow right behind.
• React 16 is really an improvement. It pushes react in front of preact and vue.js. Using the “compare with” feature for react yields the following picture:
  
  
  
  Green cells are statistically significant faster (the color indicates the p-value, light green is 10% with darker green for lower p-values) and red ones are slower. For white cells no statistic conclusion can be drawn.
  Angular and react are very close, especially with the no-zone variant. Preact has lost its performance advantage on react 16 and react-lite is far behind. The partial update benchmark uses 10,000 rows in this round, since it was below the 16 msec frame window with 1,000 rows for most frameworks and thus didn’t show much differences between the frameworks in the last round. Vue.js doesn’t seem to like the larger table for that particular benchmark, but is very competitive for the others.

Further links

If you want to run the benchmarks on your machine just follow the README.