7

Does the ReactJS virtual DOM make your app faster if you put all CSS as inline style? VS using raw .css files?

http://facebook.github.io/react/tips/inline-styles.html

Also see this ReactJS presentation on CSS in JavaScript: https://speakerdeck.com/vjeux/react-css-in-js

Giant Elk
  • 5,375
  • 9
  • 43
  • 56
  • Possibly related (also interesting reading) https://stackoverflow.com/questions/8284365/external-css-vs-inline-style-performance-difference – mattsven Feb 22 '15 at 04:13
  • found this interesting jsperf stuff http://jsperf.com/js-inline-css-vs-stylesheet-one-at-a-time/2 Results say that stylesheets is faster than inline – Dhiraj Feb 22 '15 at 04:14

1 Answers1

13

Browsers have put years of efforts into making their CSS stylesheet parsing + rendering engines blazing fast and memory efficient. Inline styles haven't exactly had that same treatment. However the bright side is that it actually doesn't matter much if you're creating normal-sized apps/pages. The difference is miniscule. Inline styles make up for the fact that 100% of the styles are actually used, where CSS stylesheets are often concatenated and almost 90% of the parsed rules are inactive (wasted).

Tip: Improve your performance by avoiding React re-renders. That's where the bottleneck often really is!