CSS：内联样式变慢吗？

哪个渲染速度更快？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>

来源

2011-03-07 Adam

两者都会很快。如果你因优化问题，你应该优化别的地方。 – 2011-03-07 18:52:06

我猜测内联样式的代码应该能够更快地渲染几微秒...... – 2011-03-07 18:55:12

您可能从内联样式中获得的一小部分时间内会损失很多（很多很多很多次）在你不必在多个地方做出风格变化的时候。不要这样对你自己。 – bhamby 2011-03-07 19:03:07

在实际显示内容方面，代码的两个部分之间的速度差异可以忽略不计。不同的浏览器最有可能有不同的渲染网页的实现，所以用一个浏览器获得的微小提升速度不一定会反映在另一个浏览器中。

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

来源

2011-03-07 19:20:34 Sam

如果我们用内联样式谈论数百个Kb（或Mb）的HTML，这将是一个不同的故事。 – 2015-03-05 12:52:23

我会想象（由于涉及到的HTTP请求）外部CSS将变得更慢但内嵌样式是可怕的可维护性和否定CSS整点这是集中颜色和布局的值，所以你不必遍历每个元素来改变样式。

另见this

来源

2011-03-07 18:52:32

@Myles，我想由于多个http流它会更快 – 2011-03-07 18:55:14

@WaqasRaja我不这么认为，多个http流只受益于子域/无cookie的域 - 因为我们不知道什么图像等等假设外部更安全的页面会稍微变慢（尽管可以忽略不计）。我相信整个页面由浏览器渲染（布局明智，然后CSS应用） – 2011-03-07 18:58:04

@Myles，你注意到为什么下载加速器更快。只是因为多个流 – 2011-03-07 19:01:49

即使你认为你不希望有便于以后使用外部样式表，使用样式标签在<头>与要素类将自动纳入服务器端编程语言，而不是有几十个内联样式。除非您的样式数量较少，否则您的总和值也会较低。

退房谷歌的新的404页：他们甚至有在风格标签的图片：

http://www.google.com/123412312

来源

2011-03-07 19:06:13

CSS：内联样式变慢吗？

回答

相关问题