javascript - What is faster, raw CSS or inline styles in ReactJS? - Stack Overflow

admin管理员组

文章数量:1289845

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

.html

Also see this ReactJS presentation on CSS in JavaScript:

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./vjeux/react-css-in-js

• javascript
• css
• reactjs

Share Improve this question Follow asked Feb 22, 2015 at 4:06 Giant ElkGiant Elk 5,68599 gold badges4646 silver badges5757 bronze badges 2

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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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!

本文标签： javascriptWhat is fasterraw CSS or inline styles in ReactJSStack Overflow