CSS优化，这更快

Question

您认为哪个更快，有一个'main.css'样式表，然后是网站的每个部分的附加样式表，或者有一个'main.css'样式表，然后有一个额外的样式表整个网站的其余部分？附加样式表将通过正文ID和类挂钩元素，并且需要更长的选择器。例如，＃body-id .page-wrap。
问题归结为：为特定样式部分添加额外的选择器（10 - 20个唯一元素）是否比非缓存样式表的额外HTTP请求减慢了网站的速度？

Answer 1

  

问题可归结为：为特定样式部分添加额外的选择器（10 - 20个唯一元素）是否比非缓存样式表的其他HTTP请求减慢了网站的速度？

没有。由于网络延迟，HTTP请求总是会变慢。这就是为什么你看到页面加载和逐步渲染的原因 - 这是因为浏览器在计算和渲染样式时非常擅长在下载页面时发生。

但这完全取决于你。如果服务器端性能至关重要，最好将HTTP请求保持在最低限度，但不要牺牲它的可维护性。忘记选择器解析或渲染性能，因为这些东西通常由浏览器来担心。

Answer 2

您应该选择选项2：“拥有'main.css'样式表，然后为整个网站的其余部分添加一个样式表”。 因为只有第一次加载CSS然后从浏览器缓存中提供它。发出http请求总是很昂贵，因为它带有一些额外的cookie字节（aprx：270b），标头信息，请求/响应时间（网络延迟）以及对apache的额外请求。

确保您的服务器上启用了缓存标头，对于css / js / images的浏览器缓存，希望您已经拥有此标识。

Answer 3

根据经验，我有一个main.css，它包含在网站的多个页面上使用的任何样式。对于其他一切，我将样式放在相应页面的头部。