To run these benchmarks:
yarn benchmark
To run benchmarks for individual implementations append ?<name>,<name> to the
URL, e.g., ?css-modules,react-native-web.
These benchmarks are crude approximations of extreme cases that libraries may
encounter. The deep and wide tree cases look at the performance of mounting and
rendering large trees of styled elements. The Triangle case looks at the
performance of repeated style updates to a large mounted tree. Some libraries
must inject new styles for each "dynamic style", whereas others may not.
Libraries without support for dynamic styles (i.e., they rely on user-authored
inline styles) do not include the SierpinskiTriangle benchmark.
The components used in the render benchmarks are simple enough to be implemented by multiple UI or style libraries. The benchmark implementations and the features of the style libraries are only approximately equivalent in functionality.
Typical render timings*: mean ± two standard deviations.
| Implementation | Deep tree (ms) | Wide tree (ms) | Triangle (ms) |
|---|---|---|---|
[email protected] |
89.67 ±28.51 |
167.46 ±27.03 |
65.40 ±19.50 |
css-modules |
77.42 ±45.50 |
141.44 ±33.96 |
- |
inline-styles |
236.25 ±95.57 |
477.01 ±88.30 |
40.95 ±23.53 |
Other libraries
| Implementation | Deep tree (ms) | Wide tree (ms) | Triangle (ms) |
|---|---|---|---|
[email protected] |
83.53 ±33.55 |
153.12 ±39.13 |
56.47 ±24.22 |
[email protected] |
88.23 ±31.22 |
164.03 ±34.70 |
- |
[email protected] |
110.09 ±34.20 |
182.06 ±50.39 |
‡ |
[email protected] |
103.44 ±32.12 |
204.45 ±41.00 |
110.28 ±26.94 |
[email protected] |
136.17 ±59.23 |
270.51 ±69.20 |
- |
[email protected] |
217.57 ±51.90 |
437.57 ±65.74 |
76.99 ±41.79 |
[email protected] |
240.88 ±79.82 |
467.32 ±74.42 |
70.95 ±32.90 |
[email protected] |
400.19 ±94.58 |
816.59 ±91.10 |
71.13 ±27.22 |
These results indicate that render times when using react-native-web,
css-modules, aphrodite, and styletron are roughly equivalent and
significantly faster than alternatives.
*MacBook Pro (13-inch, Early 2011); 2.3 GHz Intel Core i5; 8 GB 1333 MHz DDR3. Google Chrome 62.
‡Glamor essentially crashes the browser tab.