CSS: Is inline styling slower?

问题

Which renders faster?

// Just HTML
<div id="holder">
    <div style="float:left;">test1</div>
    <div style="float:left;">test2</div>
    <div style="float:left;">test3</div>
</div>

// CSS
#holder div{
    float:left;
}

// HTML
<div id="holder">
    <div>test1</div>
    <div>test2</div>
    <div>test3</div>
</div>

回答1:

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 the minute 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 starts to become an issue since each time you refer to an new stylesheet the browser must submit another request. The solution? Simply concatenate stylesheets together into one.

回答2:

I would imagine (due to the HTTP-Request involved) that external CSS would be slower but inline styles are horrific for maintainability and negates the whole point of CSS which is to centralise values for colour and layout so you don't have to iterate through every element to change a style.

Also see this

回答3:

Even if you assume that you don't want to use an external stylesheet, using a style tag in the <head> with classes on the elements will make an automatic inclusion easy later with a server-side programming language, rather than having dozens of inline styles. Unless you have a trivial numbers of styles, your total bytecount will be lower as well.

Check out Google's new 404 page: they even have the images in the style tag:

http://www.google.com/123412312

回答4:

In terms of browsing there shouldn’t be any difference you can test this with browsers' developer tools. Apart from code maintainability already mentioned in other answers, there is also the issue of specificity of inline rules. Since they have the highest specificity (1,0,0,0) they would override all other cascades. So you should carefully examines your use case rather than making the decision based on performance criteria

来源：https://stackoverflow.com/questions/5223782/css-is-inline-styling-slower

标签

html

css

performance

html-rendering