From fb4635e0134940f65e646eef42fc52f65c568063 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Thu, 8 Feb 2018 16:09:56 -0800 Subject: [PATCH] Update README's --- README.md | 2 +- packages/benchmarks/README.md | 72 ++++++++--------------- packages/benchmarks/src/app/ReportCard.js | 2 +- 3 files changed, 27 insertions(+), 49 deletions(-) diff --git a/README.md b/README.md index 04d33889..a59c777a 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ rewriting existing code. React Native for Web can also render to HTML and critical CSS on the server using Node.js. Who is using React Native for Web? [Twitter](https://mobile.twitter.com), -[Major League Soccer](https://matchcenter.mlssoccer.com), [The +[Major League Soccer](https://matchcenter.mlssoccer.com), Playstation, Uber, [The Times](https://github.com/newsuk/times-components), [React Native's documentation](http://facebook.github.io/react-native/). diff --git a/packages/benchmarks/README.md b/packages/benchmarks/README.md index eae98f06..95e5045a 100644 --- a/packages/benchmarks/README.md +++ b/packages/benchmarks/README.md @@ -19,12 +19,9 @@ yarn benchmarks --watch ## Notes These benchmarks are 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 dynamic 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 a corresponding benchmark. +encounter. Their purpose is to provide an early-warning signal for performance +regressions. Each test report includes the mean and standard deviation of the +timings, and approximations of the time spent in scripting (S) and layout (L). The components used in the render benchmarks are simple enough to be implemented by multiple UI or style libraries. The benchmark implementations @@ -33,6 +30,19 @@ functionality_. No benchmark will run for more than 20 seconds. +### Mount deep/wide tree + +These cases look at the performance of mounting and rendering large trees of +elements that use static styles. + +### Update dynamic styles + +This case looks at the performance of repeated style updates to a large mounted +tree. Some libraries choose to inject new styles for each "dynamic style", +whereas others choose to use inline styles. Libraries without built-in support +for dynamic styles (i.e., they rely on user-authored inline styles) are not +included. + ## Example results ### MacBook Pro (2011) @@ -41,52 +51,20 @@ MacBook Pro (13-inch, Early 2011); 2.3 GHz Intel Core i5; 8 GB 1333 MHz DDR3 RAM Typical render timings: mean ± standard deviations. -| Implementation | Mount deep tree (ms) | Mount wide tree (ms) | Dynamic update (ms) | +| 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.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) | 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` | ‡ | -| `emotion@8.0.12` | `21.07` `±04.16` | `31.40` `±09.40` | ‡ `19.80` `±13.56` | -| `styletron-react@3.0.3` | `23.55` `±05.14` | `34.26` `±07.58` | `10.39` `±02.94` | -| `react-fela@5.0.0` | `27.58` `±04.26` | `39.54` `±05.46` | `10.93` `±01.69` | -| `react-jss@8.2.1` | `27.31` `±07.87` | `40.74` `±10.67` | - | -| `styled-jsx@2.2.1` | `27.46` `±07.85` | `41.47` `±11.53` | `29.16` `±09.98` | -| `styled-components@2.4.0` | `43.89` `±06.99` | `63.26` `±09.02` | `16.17` `±03.71` | -| `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` | +| `css-modules` | `30.19` `±04.84` | `38.25` `±04.85` | - | +| `react-native-web@0.4.0` | `36.40` `±04.98` | `51.28` `±05.58` | `19.36` `±02.56` | +| `inline-styles` | `64.12` `±07.69` | `94.49` `±11.34` | `09.84` `±02.36` | ### Moto G4 -Moto G4 (Android 7); Octa-core (4x1.5 GHz & 4x1.2 Ghz); 2 GB RAM. Google Chrome 63 +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) | +| 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. +| `css-modules` | `98.24` `±20.26` | `143.75` `±25.50` | - | +| `react-native-web@0.4.0` | `131.46` `±18.96` | `174.70` `±14.88` | `60.87` `±06.32` | +| `inline-styles` | `184.58` `±26.23` | `273.86` `±26.23` | `30.28` `±07.44` | diff --git a/packages/benchmarks/src/app/ReportCard.js b/packages/benchmarks/src/app/ReportCard.js index b8cf616e..ffab153c 100644 --- a/packages/benchmarks/src/app/ReportCard.js +++ b/packages/benchmarks/src/app/ReportCard.js @@ -40,7 +40,7 @@ class ReportCard extends React.PureComponent { {fmt(mean)} ±{fmt(stdDev)} ms - (S/L) {fmt(meanScripting)} / {fmt(meanLayout)} ms + (S/L) {fmt(meanScripting)}/{fmt(meanLayout)} ms ) : (