Performance

To run these benchmarks:

npm run build:performance
open ./performance/index.html

Notes

The components used in the render benchmarks are simple enough to be implemented by multiple styling libraries. The implementations are not equivalent but are useful for framing the relative performance of react-native-web against these tests.

The implementations are not equivalent. For example, the react-native-web implementation of View does more than just styling. The react-native-web/lite variant implements a minimal View that allows for a more direct comparison with the css-modules baseline.

Benchmark results

Typical render timings*: mean / two standard deviations

Version: 0.0.73

Implementation	Deep tree (ms)	Wide tree (ms)
css-modules	`80.47` `±18.04`	`166.91` `±19.90`
react-native-web/lite	`87.91` `±13.37`	`181.45` `±20.06`
react-native-web	`113.45` `±09.27`	`237.33` `±38.77`
styled-components	`170.86` `±15.67`	`378.83` `±36.11`
glamor	`275.41` `±19.56`	`474.76` `±29.02`

*MacBook Pro (13-inch, Early 2011); 2.7 GHz Intel Core i7; 16 GB 1600 MHz DDR3. Google Chrome 56.