I made this giant local HMTL page with about 20,000 entries from a Spanish-English dictionary.

I wanted to distinguish Spanish from English so I turned all the Spanish in red font. I added the HTML code between each of the 20,000 entries to turn each line into a different color. (automated in Sublime)

• The first version has a separate CSS style sheet where I define the color in a div element with a .color class. It takes about 6 seconds to load (I am not pulling this off from a server, both the HTML and CSS are stored locally on an SSD).

• The version is inline using <p style="color:red;"> tags. It loads instantly, in under 0.1 seconds.

Why is the CSS version so slow compared to inline? This happened on every browser I tried.

CodePudding user response：

CSS: Is inline styling slower?

In terms of actually displaying content, the speed differences between the two sections of code is negligible. Different browsers most likely have different implementations for rendering a webpage so a speed boost you get with one browser won't necessarily be reflected in another.

Now in terms of load times, it's a different story. Yes, inline styles are technically faster than an external stylesheet because you are making one less request on top of the page but using an external stylesheet is much preferred for code maintainability. It's only when you're loading multiple stylesheets that performance might start to become an issue since each time you refer to a new stylesheet the browser must submit another request.