2015-02-22 2 views
6

Macht das ReactJS virtuelle DOM Ihre App schneller, wenn Sie alle CSS als Inline-Stil verwenden? VS mit rohen .css-Dateien?Was ist schneller, rohe CSS oder Inline-Stile in ReactJS?

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

Auch diese ReactJS Präsentation auf CSS in JavaScript sehen: https://speakerdeck.com/vjeux/react-css-in-js

+0

Möglicherweise verwandte (auch interessante Lektüre) https://stackoverflow.com/questions/8284365/external-css-vs-inline-style-performance-difference – mattsven

+0

hat dieses interessante jsperf Zeug http://jsperf.com/js-inline-css-vs-stylesheet-one-at-a-time/2 Ergebnisse sagen, dass Stylesheets schneller als Inline ist – Dhiraj

Antwort

9

Browser haben setzen Jahren harter Arbeit in die CSS-Stylesheet machen schnell und Speicher prallen effiziente Rendering-Engines Parsen +. Inline-Stile haben nicht genau die gleiche Behandlung. Die helle Seite ist jedoch, dass es eigentlich keine Rolle spielt, wenn Sie Apps/Seiten normaler Größe erstellen. Der Unterschied ist winzig. Inline-Stile machen die Tatsache wieder gut, dass 100% der Stile tatsächlich verwendet werden, wobei CSS-Stylesheets häufig verkettet werden und fast 90% der analysierten Regeln inaktiv sind (verschwendet).

Tipp: Verbessern Sie Ihre Leistung, indem Sie React-Rendern vermeiden. Da ist der Flaschenhals oft wirklich!