zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-28 16:45:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add styled-components/primitives to benchmarks

Browse Source
This commit is contained in:
Nicolas Gallagher
2017-06-24 10:11:29 -07:00
parent 8777e25d8e
commit f237fc3094
6 changed files with 266 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
benchmarks/README.md
+20 -13
View File
@@ -11,30 +11,37 @@ open ./performance/index.html
The components used in the render benchmarks are simple enough to be
implemented by multiple UI or style libraries. The implementations are not
equivalent in functionality.
equivalent in functionality. For example, React Native for Web's stylesheet is
unique in that it also converts React Native styles to DOM styles, has
deterministic resolution, and supports RTL layout.
`react-native-web/stylesheet` is a comparative baseline that implements a
simple `View` without much of React Native's functionality.
## Benchmark results
Typical render timings*: mean ± two standard deviations
Typical render timings*: mean ± two standard deviations.
| Implementation | Deep tree (ms) | Wide tree (ms) | Tweets (ms) |
| Implementation | Deep tree (ms) | Wide tree (ms) | Tweets (ms) |
| :--- | ---: | ---: | ---: |
| `css-modules` | `87.67` `±15.22` | `170.85` `±16.87` | |
| `react-native-web/stylesheet@0.0.84` | `90.02` `±13.16` | `186.66` `±19.23` | |
| `react-native-web@0.0.84` | `102.72` `±19.26` | `222.35` `±18.95` | `12.81` `±5.45ms` |
| `css-modules` | `94.96` `±31.01` | `200.43` `±38.90` | |
| `react-native-web/stylesheet@0.0.107` | `98.58` `±10.83` | `218.59` `±36.52` | |
| `react-native-web@0.0.107` | `117.45` `±18.76` | `288.27` `±33.50` | `15.10` `±5.45ms` |
Other libraries
| Implementation | Deep tree (ms) | Wide tree (ms) |
| :--- | ---: | ---: |
| `styletron@2.5.1` | `88.48` `±12.00` | `171.89` `±13.28` |
| `aphrodite@1.2.0` | `101.32` `±20.33` | `220.33` `±31.41` |
| `glamor@3.0.0-1` | `129.00` `±14.92` | `264.57` `±28.54` |
| `react-jss@5.4.1` | `137.33` `±21.55` | `314.91` `±29.03` |
| `reactxp@0.34.3` | `223.82` `±32.77` | `461.56` `±34.43` |
| `styled-components@2.0.0-11` | `277.53` `±28.83` | `627.91` `±43.13` |
| `styletron@2.5.1` | `90.38` `±15.15` | `197.40` `±29.02` |
| `aphrodite@1.2.0` | `88.65` `±19.62` | `187.35` `±24.60` |
| `glamor@3.0.0-1` | `145.64` `±21.93` | `283.60` `±23.26` |
| `react-jss@5.4.1` | `143.17` `±19.14` | `361.80` `±33.39` |
| `reactxp@0.34.3` | `227.18` `±28.75` | `496.08` `±59.96` |
| `styled-components@2.1.0` | `262.85` `±46.12` | `578.43` `±35.86` |
| `styled-components/primitives@2.1.0` | `261.43` `±44.14` | `569.65` `±22.19` |
*MacBook Pro (13-inch, Early 2011); 2.7 GHz Intel Core i7; 16 GB 1600 MHz DDR3. Google Chrome 56.
These results indicate that render performance is not a significant
differentiating factor between `aphrodite`, `styletron`, and
`react-native-web/stylesheet`.
*MacBook Pro (13-inch, Early 2015); 3.1 GHz Intel Core i7; 16 GB 1867 MHz DDR3. Google Chrome 58 (2x CPU slowdown).