Skip to content

Instantly share code, notes, and snippets.

@timneutkens
Last active September 8, 2018 10:26
Show Gist options
  • Star 20 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save timneutkens/ab0ac6dd6d235f1bce43d31c924cf75a to your computer and use it in GitHub Desktop.
Save timneutkens/ab0ac6dd6d235f1bce43d31c924cf75a to your computer and use it in GitHub Desktop.

New Results:

sorted by rerender time

Solution Use CSS Use Inline-Styles Mount Time (ms) Rerender time (ms)
react (without styles) - - 16.11 29.96
styled-jsx-static + - 25.27 42.24
emotion-extract-static + + 52.29 44.79
react-css + + 28.17 46.18
styletron + - 53.03 47.36
aphrodite + + 37.64 57.75
radium - + 56.37 58.36
styled-jss-w-o-plugins + - 76.8 58.49
styled-components-v2-plugin-inline-styles + + 76.28 58.98
styled-jsx-dynamic + - 82.73 63.89
glam-simple + - 31.85 65.6
rockey-inline + + 67.41 67.09
emotion-css-mode + + 35.65 68.74
glam-inline-style + + 35.92 69.95
styled-jss + - 95.91 74.13
cxs + + 39.01 84.07
emotion-simple + - 106.02 89.34
fela + - 53.85 93.62
rockey-speedy + - 63.61 122.65
glamorous + - 119.82 175.6
react-jss + - 117.11 199.65
glamorous-glamour-css + - 170.83 267.94
rockey + - 199.93 288.93
styled-components-v2-plugin-decouple-cell + - 917.76 2,139.01
styled-components-v2-plugin + - 1,111.39 2,563.19

Old Results:

sorted by rerender time

Solution Use CSS Use Inline-Styles Mount Time (ms) Rerender time (ms)
react (without styles) - - 15.91 28.22
react (with inline-styles) - + 22.05 32.46
emotion-css-mode + + 25.71 33.38
cxs + + 24.13 34.26
emotion-extract-static + + 40.82 35.58
react-css + + 25.91 35.94
styled-jsx + + 30.98 36.38
aphrodite + + 30.33 37.09
glam-inline-style + + 25.48 44.85
styled-jss-w-o-plugins + - 68.94 45.34
rockey-inline + + 55.41 47.79
styled-components-v2-plugin-inline-styles + + 64.5 49.37
radium - + 55.61 49.55
glam-simple + - 30.5 51.87
styled-jss + - 95.86 52.43
rockey-speedy + - 76.76 59.96
styletron + - 67.49 60.54
emotion-simple + - 91.01 62.74
react-jss + - 109.1 63.78
fela + - 54.77 93.51
glamorous + - 120.82 144.66
rockey + - 131.86 179.27
glamorous-glamour-css + - 157.25 198.57
styled-components-v2-plugin-decouple-cell + - 741.01 1,701.78
styled-components-v2-plugin + - 957.26 2,383.78
@streamich
Copy link

Added nano-css to the benchmarks:

Solution Use CSS Use Inline-Styles Mount Time (ms) Rerender time (ms)
react (without styles) - - 18.25 45.01
nano-css (using put() interface) + + 29.6 51.15
react (with inline-styles) - + 30.5 51.42
nano-css (using rule() interface) + + 31.25 53.49
cxs + + 34.9 54.84
styled-jsx-inline-styles + + 37.25 55.42
nano-css (using jsx() interface) + + 42.87 55.93
emotion-css-mode + + 34.43 56.05
react-css + + 35.48 58.44
aphrodite + + 42.7 59.3
nano-css (using styled() interface) + + 44 59.79
nano-css (using drule() interface) + - 35.6 62.18
glam-inline-style + + 34.6 62.88
nano-css (using dsheet() interface) + + 37.7 64.43
styled-jss-w-o-plugins-v2 + - 105.05 70.02
styled-jss-w-o-plugins + - 100.23 71.64
styled-components-inline-styles + + 78.4 71.82
rockey-inline + + 81.7 73.16
nano-css (using styled() interface CSS-only) + - 65.9 74.23
glam-simple + - 41.33 74.63
styled-jss-v2 + - 135.57 78.05
styled-jss + - 134.45 79.81
fela + - 55.3 81.53
nano-css (using sheet() interface) + + 32.7 82.43
emotion-simple + - 108.75 84.71
emotion-extract-static + + 120.85 84.82
emotion-decouple + - 107.45 85.83
radium - + 80.8 89.52
styletron + - 86.43 92.42
merge-styles + - 85.08 96.36
styled-components + - 146.8 96.71
styled-components-decouple-cell + - 187.1 109.68
styled-jsx-dynamic + - 149.23 115.61
react-native-web + + 167.75 122.86
rockey-speedy + - 90.8 155.07
rockey + - 171.6 218.18
react-jss + - 161.8 256.31
glamorous + - 217.15 273.26
glamorous-glamour-css + - 221.8 366.03

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment