What is faster, raw CSS or inline styles in ReactJS?

Question

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

Possibly related (also interesting reading) stackoverflow.com/questions/8284365/… — mattsven
– mattsven, Commented Feb 22, 2015 at 4:13
found this interesting jsperf stuff jsperf.com/js-inline-css-vs-stylesheet-one-at-a-time/2 Results say that stylesheets is faster than inline — Dhiraj
– Dhiraj, Commented Feb 22, 2015 at 4:14

user217782 · Accepted Answer · 2015-03-12 23:43:10Z

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!

answered Mar 12, 2015 at 23:43

user217782

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

What is faster, raw CSS or inline styles in ReactJS?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related