外部CSS与内联样式的性能差异？

Question

我的一个朋友说使用<div style=""></div>而不是压缩的css文件放在link hrefhead部分给了一些性能提升.真的吗？

Answer 1

与使用CSS文件的性能提升量(通过其他因素)相比,您的朋友提到的性能提升可能过于微不足道.

使用style属性,浏览器仅绘制该特定元素的规则,在本例中为该<div>元素.这减少了CSS引擎查找哪些元素与CSS选择器匹配的查找时间(例如a.hover或#someContainer li).

但是,将样式放在元素级别意味着您无法单独缓存CSS样式规则.通常在CSS文件中放置样式将允许完成缓存,从而减少每次加载页面时服务器的负载量.

将样式规则放在元素级别也会使您无法跟踪哪些元素的样式.它可能会削弱绘制特定元素的性能提升,您可以将多个元素重新组合在一起.使用CSS文件将CSS与HTML分开,从而允许您确保样式正确并且以后更容易修改.

因此,如果您查看比较,您会发现使用CSS文件比元素级别的样式更有益处.

不要忘记当你有一个外部CSS样式表文件时,你的浏览器可以缓存文件,提高你的应用程序效率!

请注意,当有一个引擎在发送给客户端之前内联样式时,与维护相关的所有缺点都会消失 (21认同)
使用React + Radium时,与维护相关的缺点也会消失. (4认同)
你能提供chrome profiler的任何统计数据吗？CPU和GPU在移动设备和平板电脑上的成本很高,电池消耗成本很高.我认为有一个权衡.Cache有什么好处？浏览器必须为当前元素计算样式,如果有许多规则,解析样式将更加昂贵. (3认同)
是.我只是为今天及以后看到这个答案的人添加评论. (2认同)

Answer 2

如果您使用内联样式与样式表，则页面加载速度更快。在某些情况下必须更快。

当您使用带有href的样式表时，它需要对服务器的另一个请求，然后在响应后解析文件。对于内联样式，没有任何东西，只有直接解析。

如果客户的互联网速度较慢，则该单个请求可能会非常缓慢，从而使页面没有样式，直到样式表交付为止。同样，如果是内联的，则根本不会有延迟。

我们使用样式表的唯一原因是要有条理。有时不需要它们，因此内联样式或文档内样式表就足够了。

这个答案完全忽略了浏览器缓存。样式表仅允许一次请求样式并进行缓存，从而减少了通过网络发送的内容量。 (3认同)
这个答案还忽略了内联样式使 HTML 文件更大的事实。有可能，特别是在使用重复的内联样式时，比 CSS 文件大很多倍。顺便说一句，浏览器可以并行加载多个文件（并像上面提到的那样缓存它们）。 (3认同)
@GeekOnCoffee，但 HTML 页面有望被缓存（304），因此缓存并没有被真正忽略。 (2认同)
@JanVanderHaegen 如果您不必包含您正在访问的特定页面上未使用的 CSS，则初始加载时间可能会更快。如果将所有 CSS 放入外部文件中，那么 HTML 文件会更小，这是事实，但外部 CSS 文件可能会更大。优点和缺点。 (2认同)

Answer 3

这不是一个容易回答的问题，因为这种情况下的性能取决于许多因素（CSS 选择器的复杂性、文档大小等）。然而，如果我们采取一个孤立的案例，那么我们可以看到 CSS 类通常比内联样式更快：
内联样式 vs CSS 类