From a1892ec8b8518eacb920f04b5a057b58931787b1 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Sat, 15 Jul 2017 11:02:57 -0700 Subject: [PATCH] Update benchmark subjects and results --- benchmarks/README.md | 30 ++--- benchmarks/index.js | 26 ++++- benchmarks/package.json | 7 +- benchmarks/src/components/Box/radium.js | 48 ++++++++ benchmarks/src/components/View/radium.js | 31 ++++++ benchmarks/src/radium.js | 9 ++ benchmarks/yarn.lock | 133 +++++++++++++++++------ 7 files changed, 229 insertions(+), 55 deletions(-) create mode 100644 benchmarks/src/components/Box/radium.js create mode 100644 benchmarks/src/components/View/radium.js create mode 100644 benchmarks/src/radium.js diff --git a/benchmarks/README.md b/benchmarks/README.md index b852b9cb..5484396a 100644 --- a/benchmarks/README.md +++ b/benchmarks/README.md @@ -7,6 +7,9 @@ npm run build:performance open ./performance/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 @@ -24,24 +27,25 @@ Typical render timings*: mean ± two standard deviations. | Implementation | Deep tree (ms) | Wide tree (ms) | Tweets (ms) | | :--- | ---: | ---: | ---: | -| `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` | +| `css-modules` | `84.19` `±14.69` | `183.37` `±22.98` | | +| `react-native-web/stylesheet@0.0.113` | `88.83` `±14.31` | `185.54` `±24.62` | | +| `react-native-web@0.0.113` | `110.45` `±19.63` | `251.53` `±32.52` | `15.52` `±7.93ms` | Other libraries | Implementation | Deep tree (ms) | Wide tree (ms) | | :--- | ---: | ---: | -| `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` | +| `aphrodite@1.2.3` | `84.68` `±18.80` | `180.62` `±41.98` | +| `styletron@2.5.1` | `83.93` `±13.10` | `185.96` `±45.65` | +| `react-jss@7.0.1` | `174.75` `±30.87` | `411.77` `±83.83` | +| `glamor@3.0.0-3` | `255.21` `±45.68` | `545.74` `±107.79` | +| `reactxp@0.34.3` | `237.46` `±36.72` | `514.48` `±84.87` | +| `styled-components@2.1.1` | `266.91` `±50.04` | `598.29` `±95.13` | +| `styled-components/primitives@2.1.1` | `266.62` `±50.39` | `567.13` `±68.12` | +| `radium@0.19.1` | `518.48` `±69.74` | `1058.85` `±120.85` | -These results indicate that render performance is not a significant -differentiating factor between `aphrodite`, `styletron`, and -`react-native-web/stylesheet`. +These results indicate that styled 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). diff --git a/benchmarks/index.js b/benchmarks/index.js index ee2c170d..efb6f86f 100644 --- a/benchmarks/index.js +++ b/benchmarks/index.js @@ -2,6 +2,7 @@ import aphrodite from './src/aphrodite'; import cssModules from './src/css-modules'; import glamor from './src/glamor'; import jss from './src/jss'; +import radium from './src/radium'; import reactNative from './src/react-native'; import reactNativeStyleSheet from './src/react-native-stylesheet'; import styledComponents from './src/styled-components'; @@ -14,6 +15,7 @@ import renderTweet from './tests/renderTweet'; import renderWideTree from './tests/renderWideTree'; const testAll = window.location.search === '?all'; +const testFastest = window.location.search === '?fastest'; const coreTests = [ () => renderTweet('react-native-web', reactNative), @@ -26,18 +28,23 @@ const coreTests = [ () => renderWideTree('react-native-web', reactNative) ]; -/** - * Optionally run tests using other libraries - */ -const extraTests = [ +const fastestTests = [ () => renderDeepTree('styletron', styletron), () => renderWideTree('styletron', styletron), () => renderDeepTree('aphrodite', aphrodite), - () => renderWideTree('aphrodite', aphrodite), + () => renderWideTree('aphrodite', aphrodite) +]; + +/** + * Optionally run tests using other libraries + */ +const restTests = [ () => renderDeepTree('glamor', glamor), () => renderWideTree('glamor', glamor), () => renderDeepTree('react-jss', jss), () => renderWideTree('react-jss', jss), + () => renderDeepTree('radium', radium), + () => renderWideTree('radium', radium), () => renderDeepTree('reactxp', xp), () => renderWideTree('reactxp', xp), () => renderDeepTree('styled-components', styledComponents), @@ -46,7 +53,14 @@ const extraTests = [ () => renderWideTree('styled-components/primitives', styledComponentsPrimitives) ]; -const tests = testAll ? coreTests.concat(extraTests) : coreTests; +const tests = [...coreTests]; +if (testFastest) { + tests.push(...fastestTests); +} +if (testAll) { + tests.push(...fastestTests); + tests.push(...restTests); +} // run benchmarks tests.reduce((promise, test) => promise.then(test()), Promise.resolve()); diff --git a/benchmarks/package.json b/benchmarks/package.json index 912b59f1..d6bff6a2 100644 --- a/benchmarks/package.json +++ b/benchmarks/package.json @@ -2,11 +2,12 @@ "name": "performance", "private": true, "dependencies": { - "aphrodite": "^1.2.1", + "aphrodite": "^1.2.3", "classnames": "^2.2.5", - "glamor": "^3.0.0-2", + "glamor": "^3.0.0-3", "marky": "^1.2.0", - "react-jss": "^7.0.0-pre.1", + "radium": "^0.19.1", + "react-jss": "^7.0.1", "react-primitives": "^0.4.3", "reactxp": "0.34.3", "styled-components": "^2.1.1", diff --git a/benchmarks/src/components/Box/radium.js b/benchmarks/src/components/Box/radium.js new file mode 100644 index 00000000..31b6540a --- /dev/null +++ b/benchmarks/src/components/Box/radium.js @@ -0,0 +1,48 @@ +/* eslint-disable react/prop-types */ +import Radium from 'radium' +import React from 'react'; +import View from '../View/radium'; + +const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => + ; + +const styles = { + outer: { + padding: 4 + }, + row: { + flexDirection: 'row' + }, + color0: { + backgroundColor: '#222' + }, + color1: { + backgroundColor: '#666' + }, + color2: { + backgroundColor: '#999' + }, + color3: { + backgroundColor: 'blue' + }, + color4: { + backgroundColor: 'orange' + }, + color5: { + backgroundColor: 'red' + }, + fixed: { + width: 20, + height: 20 + } +}; + +export default Radium(Box); diff --git a/benchmarks/src/components/View/radium.js b/benchmarks/src/components/View/radium.js new file mode 100644 index 00000000..552f50f9 --- /dev/null +++ b/benchmarks/src/components/View/radium.js @@ -0,0 +1,31 @@ +/* eslint-disable react/prop-types */ +import Radium from 'radium' +import React from 'react'; + +class View extends React.Component { + render() { + const { style, ...other } = this.props; + return
+ } +} + +const styles = { + root: { + alignItems: 'stretch', + borderWidth: 0, + borderStyle: 'solid', + boxSizing: 'border-box', + display: 'flex', + flexBasis: 'auto', + flexDirection: 'column', + flexShrink: 0, + margin: 0, + padding: 0, + position: 'relative', + // fix flexbox bugs + minHeight: 0, + minWidth: 0 + } +}; + +export default Radium(View); diff --git a/benchmarks/src/radium.js b/benchmarks/src/radium.js new file mode 100644 index 00000000..ecfe0306 --- /dev/null +++ b/benchmarks/src/radium.js @@ -0,0 +1,9 @@ +import Box from './components/Box/radium'; +import View from './components/View/radium'; + +const api = { + Box, + View +}; + +export default api; diff --git a/benchmarks/yarn.lock b/benchmarks/yarn.lock index e40575a8..463362aa 100644 --- a/benchmarks/yarn.lock +++ b/benchmarks/yarn.lock @@ -37,9 +37,9 @@ ansi-styles@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe" -aphrodite@^1.2.1: - version "1.2.1" - resolved "https://registry.yarnpkg.com/aphrodite/-/aphrodite-1.2.1.tgz#a7b5066b198730be7b7a88f78dbefd77d4df5683" +aphrodite@^1.2.3: + version "1.2.3" + resolved "https://registry.yarnpkg.com/aphrodite/-/aphrodite-1.2.3.tgz#4b161e9eef319b1f90a889501f985d7b5e70b285" dependencies: asap "^2.0.3" inline-style-prefixer "^3.0.1" @@ -55,6 +55,10 @@ array-find-index@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1" +array-find@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/array-find/-/array-find-1.0.0.tgz#6c8e286d11ed768327f8e62ecee87353ca3e78b8" + asap@^2.0.3, asap@^2.0.5, asap@~2.0.3: version "2.0.5" resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f" @@ -84,7 +88,7 @@ babel-code-frame@^6.11.0: esutils "^2.0.2" js-tokens "^3.0.0" -babel-runtime@^6.18.0, babel-runtime@^6.23.0: +babel-runtime@^6.23.0: version "6.23.0" resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b" dependencies: @@ -95,6 +99,10 @@ balanced-match@^0.4.2: version "0.4.2" resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838" +balanced-match@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767" + base64-js@^1.0.2: version "1.2.0" resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1" @@ -107,6 +115,13 @@ bowser@^1.0.0, bowser@^1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.6.0.tgz#37fc387b616cb6aef370dab4d6bd402b74c5c54d" +brace-expansion@^1.1.7: + version "1.1.8" + resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292" + dependencies: + balanced-match "^1.0.0" + concat-map "0.0.1" + brcast@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/brcast/-/brcast-2.0.1.tgz#4311508f0634a6f5a2465b6cf2db27f06902aaca" @@ -208,11 +223,9 @@ colors@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63" -common-tags@^1.4.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.4.0.tgz#1187be4f3d4cf0c0427d43f74eef1f73501614c0" - dependencies: - babel-runtime "^6.18.0" +concat-map@0.0.1: + version "0.0.1" + resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" core-js@^1.0.0: version "1.2.7" @@ -389,6 +402,10 @@ esutils@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b" +exenv@^1.2.1: + version "1.2.2" + resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" + fast-deep-equal@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-0.1.0.tgz#5c6f4599aba6b333ee3342e2ed978672f1001f8d" @@ -417,18 +434,33 @@ flexibility@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/flexibility/-/flexibility-2.0.1.tgz#ad323aafc40f469ce624286518fc4d7cd72b7c77" +fs.realpath@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" + function-bind@^1.0.2: version "1.1.0" resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.0.tgz#16176714c801798e4e8f2cf7f7529467bb4a5771" -glamor@^3.0.0-2: - version "3.0.0-2" - resolved "https://registry.yarnpkg.com/glamor/-/glamor-3.0.0-2.tgz#cb28eb450a437c63c9911421a4bb74711c473dad" +glamor@^3.0.0-3: + version "3.0.0-3" + resolved "https://registry.yarnpkg.com/glamor/-/glamor-3.0.0-3.tgz#62e1cf2ce70a4db0b247a5f95d4b7d6a89ac83c9" dependencies: fbjs "^0.8.12" inline-style-prefixer "^3.0.3" react-css-property-operations "^15.4.1" +glob@^7.0.5: + version "7.1.2" + resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15" + dependencies: + fs.realpath "^1.0.0" + inflight "^1.0.4" + inherits "2" + minimatch "^3.0.4" + once "^1.3.0" + path-is-absolute "^1.0.0" + has-ansi@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91" @@ -487,7 +519,14 @@ indexes-of@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607" -inherits@2.0.1: +inflight@^1.0.4: + version "1.0.6" + resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9" + dependencies: + once "^1.3.0" + wrappy "1" + +inherits@2, inherits@2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1" @@ -498,14 +537,7 @@ inline-style-prefixer@^2.0.1, inline-style-prefixer@^2.0.5: bowser "^1.0.0" hyphenate-style-name "^1.0.1" -inline-style-prefixer@^3.0.1: - version "3.0.2" - resolved "https://artifactory.twitter.biz:443/api/npm/js-virtual/inline-style-prefixer/-/inline-style-prefixer-3.0.2.tgz#989865e0c5de7a946acbea71e16e02741efe0dd7" - dependencies: - bowser "^1.6.0" - css-in-js-utils "^1.0.3" - -inline-style-prefixer@^3.0.3, inline-style-prefixer@^3.0.6: +inline-style-prefixer@^3.0.1, inline-style-prefixer@^3.0.3, inline-style-prefixer@^3.0.6: version "3.0.6" resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-3.0.6.tgz#b27fe309b4168a31eaf38c8e8c60ab9e7c11731f" dependencies: @@ -660,9 +692,9 @@ jss-vendor-prefixer@^6.0.0: dependencies: css-vendor "^0.3.8" -jss@^8.0.0: - version "8.0.0" - resolved "https://registry.yarnpkg.com/jss/-/jss-8.0.0.tgz#7b6e3153a5045d396245adc3fad5817d00c59457" +jss@^8.1.0: + version "8.1.0" + resolved "https://registry.yarnpkg.com/jss/-/jss-8.1.0.tgz#b32f15efcce22446dfda4c2be09a04f38431da0a" dependencies: is-in-browser "^1.0.2" warning "^3.0.0" @@ -709,6 +741,12 @@ math-expression-evaluator@^1.2.14: version "1.2.16" resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.16.tgz#b357fa1ca9faefb8e48d10c14ef2bcb2d9f0a7c9" +minimatch@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083" + dependencies: + brace-expansion "^1.1.7" + minimist@0.0.8: version "0.0.8" resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d" @@ -751,6 +789,16 @@ object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" +once@^1.3.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1" + dependencies: + wrappy "1" + +path-is-absolute@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f" + postcss-calc@^5.2.0: version "5.3.1" resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e" @@ -1025,6 +1073,16 @@ query-string@^4.1.0: object-assign "^4.1.0" strict-uri-encode "^1.0.0" +radium@^0.19.1: + version "0.19.1" + resolved "https://registry.yarnpkg.com/radium/-/radium-0.19.1.tgz#0fbcc6d0ea5526bdb1e5e5371cad386775a3eec8" + dependencies: + array-find "^1.0.0" + exenv "^1.2.1" + inline-style-prefixer "^2.0.5" + prop-types "^15.5.8" + rimraf "^2.6.1" + react-addons-perf@^15.4.2: version "15.4.2" resolved "https://registry.yarnpkg.com/react-addons-perf/-/react-addons-perf-15.4.2.tgz#110bdcf5c459c4f77cb85ed634bcd3397536383b" @@ -1036,16 +1094,15 @@ react-css-property-operations@^15.4.1: version "15.4.1" resolved "https://registry.yarnpkg.com/react-css-property-operations/-/react-css-property-operations-15.4.1.tgz#4c0e305df4cc35f0f5fd2d65a79214c8b012db35" -react-jss@^7.0.0-pre.1: - version "7.0.0-pre.1" - resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-7.0.0-pre.1.tgz#948127be53cd8c9fbd2362e87c1f4a93382aeb26" +react-jss@^7.0.1: + version "7.0.1" + resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-7.0.1.tgz#36c505c3798993edd46ea01734f171f895348e25" dependencies: - common-tags "^1.4.0" hoist-non-react-statics "^1.2.0" - jss "^8.0.0" + jss "^8.1.0" jss-preset-default "^3.0.0" prop-types "^15.5.8" - theming "^1.0.1" + theming "^1.1.0" react-native-web@0.0.x: version "0.0.106" @@ -1148,6 +1205,12 @@ regjsparser@^0.1.4: dependencies: jsesc "~0.5.0" +rimraf@^2.6.1: + version "2.6.1" + resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d" + dependencies: + glob "^7.0.5" + sax@~1.2.1: version "1.2.2" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.2.tgz#fd8631a23bc7826bef5d871bdb87378c95647828" @@ -1267,9 +1330,9 @@ synctasks@^0.2.9: version "0.2.17" resolved "https://registry.yarnpkg.com/synctasks/-/synctasks-0.2.17.tgz#38852f008878de2e941b6e458ddf552245268da1" -theming@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/theming/-/theming-1.0.1.tgz#a3838c9de635e2f29fc9cd3dea4bf68d3c5a650a" +theming@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/theming/-/theming-1.1.0.tgz#0562760b55a1b919c2d5eeb94130351f8958e13a" dependencies: brcast "^2.0.0" is-function "^1.0.1" @@ -1318,3 +1381,7 @@ whatwg-fetch@>=0.10.0: whet.extend@~0.9.9: version "0.9.9" resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1" + +wrappy@1: + version "1.0.2" + resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"