Question

哪个呈现得更快？

// 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>

Answer 1

就实际显示内容而言，两段代码之间的速度差异可以忽略不计。不同的浏览器很可能有不同的实现来呈现网页，因此使用一个浏览器获得的分钟速度提升不一定会反映在另一个浏览器中。

现在就加载时间而言，这是一个不同的故事。是的，内联样式在技术上比外部样式表更快，因为您在页面顶部减少了一个请求，但使用外部样式表更适合代码可维护性。只有当您加载多个样式表时，性能才开始成为问题，因为每次引用新样式表时，浏览器都必须提交另一个请求。解决方案？只需将样式表连接成一个。

Answer 2

我想（由于涉及HTTP-Request）外部CSS会慢一些但是内联样式对于可维护性是可怕的，并且否定了CSS的全部要点，即集中颜色和布局，因此您不必遍历每个元素来更改样式。

另见this

Answer 3

即使您假设您不想使用外部样式表，也可以在＆lt; head＆gt;中使用样式标记。使用元素上的类将使用服务器端编程语言轻松实现自动包含，而不是使用几十个内联样式。除非你有很多样式，否则你的总字节数也会更低。

查看Google的新404页面：他们甚至在样式标记中包含图片：

http://www.google.com/123412312

Answer 4

在浏览方面，您可以使用浏览器的开发人员工具进行测试，应该没有任何区别。除了在其他答案中已经提到的代码可维护性之外，还存在内联规则的特殊性问题。由于它们具有最高的特异性（1,0,0,0），因此它们将覆盖所有其他级联。因此，您应该仔细检查您的用例，而不要根据性能标准做出决定

CSS：内联样式是否更慢？

4 个答案: