CSS：内联样式是否较慢？
哪个渲染速度更快？
// 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>
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>
OR
// CSS
#holder div{
float:left;
}
// HTML
<div id="holder">
<div>test1</div>
<div>test2</div>
<div>test3</div>
</div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
就实际显示内容而言，两段代码之间的速度差异可以忽略不计。不同的浏览器很可能有不同的网页渲染实现，因此使用一种浏览器获得的微小速度提升不一定会反映在另一种浏览器中。
现在就加载时间而言，这是一个不同的故事。是的，内联样式从技术上讲比外部样式表更快，因为您在页面顶部发出的请求少了一个，但为了代码的可维护性，使用外部样式表是首选。只有当您加载多个样式表时，性能才开始成为问题，因为每次引用新样式表时，浏览器都必须提交另一个请求。解决方案是什么？只需将样式表连接在一起即可。
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.
我想（由于涉及 HTTP 请求）外部 CSS 会比较慢但是内联样式对于可维护性来说是可怕的，并且否定了 CSS 的全部意义，即集中颜色和布局的值，这样你不必遍历每个元素来更改样式。
另请参阅此
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
即使您假设不想使用外部样式表，也可以在 中使用样式标记。在元素上使用类将使稍后使用服务器端编程语言轻松自动包含，而不是使用数十种内联样式。除非您的样式数量很少，否则您的总字节数也会较低。
查看 Google 的新 404 页面：他们甚至在样式标签中包含图像：
http://www.google.com/ 123412312
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
在浏览方面应该没有任何区别，您可以使用浏览器的开发人员工具进行测试。除了其他答案中已经提到的代码可维护性之外，还存在内联规则的特殊性问题。由于它们具有最高的特异性 (1,0,0,0)，因此它们将覆盖所有其他级联。因此，您应该仔细检查您的用例，而不是根据性能标准做出决定
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 examine your use case rather than making the decision based on performance criteria