mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-03-27 01:34:17 +08:00
53 lines
2.3 KiB
Markdown
53 lines
2.3 KiB
Markdown
# Performance
|
|
|
|
To run these benchmarks from the root of the project:
|
|
|
|
```
|
|
yarn benchmark
|
|
open ./benchmarks/index.html
|
|
```
|
|
|
|
Append `?fastest` to the URL to include the fastest "other libraries", and
|
|
`?all` to include all the "other libraries".
|
|
|
|
## Notes
|
|
|
|
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. 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.
|
|
|
|
| Implementation | Deep tree (ms) | Wide tree (ms) | Tweets (ms) |
|
|
| :--- | ---: | ---: | ---: |
|
|
| `css-modules` | `88.83` `±18.63` | `198.79` `±22.98` | |
|
|
| `react-native-web/stylesheet@0.0.121` | `91.17` `±19.29` | `209.67` `±32.38` | |
|
|
| `react-native-web@0.0.121` | `124.21` `±16.84` | `264.55` `±38.75` | `16.90` `±7.30ms` |
|
|
|
|
Other libraries
|
|
|
|
| Implementation | Deep tree (ms) | Wide tree (ms) |
|
|
| :--- | ---: | ---: |
|
|
| `aphrodite@1.2.3` | `91.73` `±41.63` | `197.72` `±44.90` |
|
|
| `styletron@2.5.1` | `94.73` `±37.58` | `201.81` `±57.93` |
|
|
| `glamor@2.20.40` | `146.60` `±26.73` | `277.46` `±29.17` |
|
|
| `emotion@7.2.2` | `150.79` `±38.29` | `282.18` `±41.79` |
|
|
| `react-jss@7.1.0` | `201.83` `±34.65` | `428.61` `±47.8` |
|
|
| `reactxp@0.42.1` | `262.69` `±24.14` | `595.20` `±66.17` |
|
|
| `styled-components@2.1.2` | `280.59` `±31.77` | `599.00` `±62.99` |
|
|
| `styled-components/primitives@2.1.2` | `291.74` `±48.96` | `606.57` `±78.18` |
|
|
| `radium@0.19.4` | `563.94` `±69.91` | `1139.18` `±152.59` |
|
|
|
|
These results indicate that style render performance is not a significant
|
|
differentiating factor between `aphrodite`, `css-modules`, `react-native-web`,
|
|
and `styletron`.
|
|
|
|
*MacBook Pro (13-inch, Early 2015); 3.1 GHz Intel Core i7; 16 GB 1867 MHz DDR3. Google Chrome 58 (2x CPU slowdown).
|