CSS：内联样式更慢吗？答案

【问题标题】：CSS: Is inline styling slower?CSS：内联样式更慢吗？
【发布时间】：2020-04-27 20:09:04
【问题描述】：

哪个渲染速度更快？

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

【问题讨论】：

两者都会很快。如果你因为优化而问，你应该在其他地方优化。
我猜带有内联样式的代码渲染速度应该快几微秒...
在您不必在多个地方进行样式更改的时间里，您可能会从执行内联样式中获得的一小部分时间会丢失很多（很多、很多、很多...）次.不要对自己那样做。
@galador 只是为了记录，我是在讽刺:)。人类无法记录微秒间隔=没有收益。
@Sime 嗯，我并没有真正与您具体交谈，而是发表一般性声明。虽然，我知道这样解释它是多么容易。 :-)

标签： html css performance html-rendering

【解决方案1】：

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

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

【讨论】：

如果我们说的是数百 Kb（或 Mb）的带有内联样式的 HTML，那就另当别论了。

【解决方案2】：

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

另见this

【讨论】：

@Myles，我想由于多个 http-streams 会更快
@WaqasRaja 我不这么认为，多个 http 流仅受益于子域/无 cookie 域 - 因为我们不知道页面上的图像等是什么，所以假设外部意愿更安全稍微慢一点（尽管可以忽略不计）。我相信整个页面都是由浏览器呈现的（布局方面，然后无论如何都会应用 CSS）
@Myles，你有没有注意到为什么下载加速器更快。只是因为多个流
@WaqasRaja 是的，但这不一样，你忽略了我的观点，假设它更慢更安全，因为我们不知道其余部分的内容（图像请求等）页面。
@Myles，很抱歉造成误解，但我专注于提到的代码。

【解决方案3】：

即使您假设您不想使用外部样式表，在

中使用带有元素类的样式标记也可以在以后使用服务器端编程语言轻松自动包含，而不是有几十个内联样式。除非您的样式数量很少，否则您的总字节数也会更低。

查看 Google 的新 404 页面：他们甚至在样式标签中都有图片：

http://www.google.com/123412312

【讨论】：

【解决方案4】：

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

【讨论】：