Fork me on GitHub
#react
<
2022-04-12
>
Drew Verlee15:04:15

The official React docs have this to say about inline styles. > CSS classes are generally better for performance than inline styles. But don't explain why, I have searched high and low. It's often quoted, but never explained or qualified how much worse. Outside react, inline styles, in some context's are absolutely faster. For example on first page load because you avoid having to load the stylesheet. However, I wonder if they aren't faster in general because inline styles could be picked up directly as the browser walks the tree and builds the DOM as where a class requires following a link. Of course that won't make a difference in User experience. The only thing I could assume is that they mean stylesheets are faster then using react css mechanisms at all because they require less parsing and processing. My next step would be to benchmark this myself. https://reactjs.org/docs/faq-styling.html#are-inline-styles-bad

orestis16:04:57

I think they mean inline styles in the sense of a style attribute right on a node. And by performance they probably mean layout and rendering.

orestis16:04:24

(That is, once everything is in memory, how quickly can the browser layout and render a component tree)

lilactown16:04:22

yeah this has nothing to do with React and everything to do with how browsers treat inline styles vs. CSS

Drew Verlee16:04:34

Can someone explain or link to something that help me understand why inline styles would be slower than CSS? Here is a quote from web.dv that indicates this isn't always the case: > For best performance, you may want to consider inlining the critical CSS directly into the HTML document. This eliminates additional roundtrips in the critical path and if done correctly can deliver a "one roundtrip" critical path length where only the HTML is a blocking resource. Maybe i'm not sure whats being compared. If i apply a style directly to a node it does participate in CSS. E.g inheritance, cascading (order), and specificity. Are we saying it somehow causes more work to be done? Or are we comparing inline styles to using a stylesheet specifically?

orestis16:04:13

This blog post has some definitions. These definitions is what React refers to.

orestis16:04:55

The specifics is the style attribute on a dom element vs a class attribute.

orestis16:04:31

Whether the CSS classes are defined in a separate file or in a style tag at the beginning of the HTML is not related.

🎉 1
🍺 1
❤️ 1
Drew Verlee16:04:30

thanks @U7PBP4UVA, thats 100% the information I was hoping to find.