0

This may be a strange question but I can't find an article by googling: if all your CSS styling was in attributes, i.e.

<div style="color: red; background: orange">

does that load faster than an inline stylesheet, say

<style> .alert {color: red; background: orange} </style>

in the head and

<div class="alert"></div>

in the body.

Obviously for such a trivial example it's meaningless, and maintainability would be horrible, but if you did move all styles inline into attributes, the way we sometimes do for HTML email, would it actually render faster, for a large complex page?

Curious about how the browser works when dealing with the very different methods. With an inline style sheet it knows about all possible styles from the head and matches them in the body. With attributes it renders each element as it loads, with no matching.

AmbroseChapel
  • 11,957
  • 7
  • 46
  • 68
  • 1
    Does this answer your question? [External CSS vs inline style performance difference?](https://stackoverflow.com/questions/8284365/external-css-vs-inline-style-performance-difference) – Amolgorithm Jul 04 '23 at 23:42
  • One way or the other all those style attributes have to travel over the network to the client. Consider that with external styles elements can use class names to effect the settings of dozens of CSS properties. When you use the "style" attribute, each element would need its own copy of all those properties. Also maintenance would be awful. – Pointy Jul 04 '23 at 23:42
  • General consensus is that, you declare the values once and use them multiple times (on the various elements) is more optimal than declaring the values multiple times (browser needs to interpret them every single time instead of just once) - It also makes the page longer to fetch and load (due to the repeated styles), and you lose the benefit of caching – blurfus Jul 04 '23 at 23:45
  • I believe the browser can cache external CSS stylesheet files, which increases your application performance and efficiency. I can't verify that though. – Amolgorithm Jul 04 '23 at 23:49
  • 1
    @Amolgorithm you are correct and you can easily verify that by looking at the "network" tab of the browser developer tools. It tells you which resources have been loaded from cache rather than fetched. – Noam Jul 05 '23 at 00:02

0 Answers0