diff --git a/packages/benchmarks/README.md b/packages/benchmarks/README.md index 6249a3d5..a9e2d221 100644 --- a/packages/benchmarks/README.md +++ b/packages/benchmarks/README.md @@ -33,19 +33,23 @@ functionality_. No benchmark will run for more than 20 seconds. -## Results +## Example results -Typical render timings*: mean ± two standard deviations. +### MacBook Pro (2011) -| Implementation | Mount deep tree (ms) | Mount wide tree (ms) | Update tree (ms) | +MacBook Pro (13-inch, Early 2011); 2.3 GHz Intel Core i5; 8 GB 1333 MHz DDR3 RAM. Google Chrome 63. + +Typical render timings*: mean ± standard deviations. + +| Implementation | Mount deep tree (ms) | Mount wide tree (ms) | Dynamic update (ms) | | :--- | ---: | ---: | ---: | | `css-modules` | `15.23` `±04.31` | `21.27` `±07.03` | - | -| `react-native-web@0.3.1` | `17.52` `±04.44` | `24.14` `±04.39` | `15.03` `±02.22` | +| `react-native-web@0.3.2` | `17.52` `±04.44` | `24.14` `±04.39` | `15.03` `±02.22` | | `inline-styles` | `50.06` `±06.70` | `76.38` `±09.58` | `06.43` `±02.02` | Other libraries -| Implementation | Mount deep tree (ms) | Mount wide tree (ms) | Update tree (ms) | +| Implementation | Mount deep tree (ms) | Mount wide tree (ms) | Dynamic update (ms) | | :--- | ---: | ---: | ---: | | `aphrodite@1.2.5` | `17.27` `±05.96` | `24.89` `±08.36` | - | | `glamor@2.20.40` | `21.59` `±05.38` | `27.93` `±07.56` | ‡ | @@ -58,10 +62,31 @@ Other libraries | `reactxp@0.51.0-alpha.9` | `51.86` `±07.21` | `78.80` `±11.85` | `15.04` `±03.92` | | `radium@0.21.0` | `101.06` `±13.00` | `144.46` `±16.94` | `17.44` `±03.59` | -These results indicate that render times when using `react-native-web`, -`css-modules`, `aphrodite`, and `styletron` are roughly equivalent and -significantly faster than alternatives. +### Moto G4 -*MacBook Pro (13-inch, Early 2011); 2.3 GHz Intel Core i5; 8 GB 1333 MHz DDR3. Google Chrome 62. +Moto G4 (Android 7); Octa-core (4x1.5 GHz & 4x1.2 Ghz); 2 GB RAM. Google Chrome 63 + +Typical render timings*: mean ± standard deviations. + +| Implementation | Mount deep tree (ms) | Mount wide tree (ms) | Dynamic update (ms) | +| :--- | ---: | ---: | ---: | +| `css-modules` | `56.18` `±19.54` | `75.95` `±23.55` | - | +| `react-native-web@0.3.2` | `68.53` `±21.00` | `101.03` `±25.32` | `60.57` `±09.07` | +| `inline-styles` | `140.32` `±23.91` | `208.55` `±35.25` | `20.36` `±04.92` | + +Other libraries + +| Implementation | Mount deep tree (ms) | Mount wide tree (ms) | Dynamic update (ms) | +| :--- | ---: | ---: | ---: | +| `aphrodite@1.2.5` | `58.77` `±19.73` | `85.83` `±24.64` | - | +| `glamor@2.20.40` | `81.05` `±15.87` | `104.02` `±20.92` | ‡ | +| `emotion@8.0.12` | `77.12` `±19.61` | `112.04` `±24.43` | ‡ `80.40` `±40.56` | +| `styletron-react@3.0.3` | `91.00` `±17.95` | `130.49` `±20.06` | `39.70` `±06.85` | +| `react-fela@5.0.0` | `101.36` `±19.55` | `142.18` `±21.87` | `43.64` `±12.24` | +| `styled-jsx@2.2.1` | `101.60` `±25.26` | `144.12` `±30.79` | `115.63` `±32.77` | +| `react-jss@8.2.1` | `112.46` `±32.07` | `165.96` `±42.54` | - | +| `styled-components@2.4.0` | `159.85` `±24.30` | `231.00` `±31.34` | `53.86` `±13.40` | +| `reactxp@0.51.0-alpha.9` | `182.05` `±30.72` | `261.25` `±35.54` | `58.20` `±08.62` | +| `radium@0.21.0` | `323.93` `±41.46` | `464.70` `±53.93` | `59.13` `±09.76` | ‡Glamor essentially crashes the browser tab. Emotion gets slower every iteration.