我应该瞄准更少的 HTTP 请求还是更多的可缓存 CSS 文件？答案

【问题标题】：Should I aim for fewer HTTP requests or more cacheable CSS files?我应该瞄准更少的 HTTP 请求还是更多的可缓存 CSS 文件？
【发布时间】：2011-02-10 17:56:00
【问题描述】：

我们被告知每次页面加载的 HTTP 请求数减少是一件好事。 CSS 的极端形式是每页有一个唯一的 CSS 文件，每个文件中复制所有共享的站点范围的样式。

但有一个权衡。如果您有单独的共享全局 CSS 文件，它们可以在首页加载时缓存一次，然后在多个页面上重复使用，从而减少页面特定 CSS 文件的必要大小。

那么在实际实践中哪个更好？通过多个可缓存的离散 CSS 文件缩短 CSS 文件，还是通过更少但更大的 CSS 文件减少 HTTP 请求？

【问题讨论】：

为什么单个、唯一的 CSS 文件每页会减少 HTTP 请求的数量？
因为另一种方法是将页面样式的常见元素分解到每个页面上链接的单独文件中。在每个页面上，您将链接这些全局文件以及特定于页面的文件。因此，每页有多个 HTTP 请求。
两者。看到这个答案：stackoverflow.com/a/118886/2407870

标签： css performance http

【解决方案1】：

您的第一个呼叫端口是使用YSlow 或Google Speed 找出您网站上运行速度最慢的部分。有时，一两个严重压缩的（大）图像可能会减慢整个过程的速度。你被告知要减少 HTTP 请求，因为每个请求都有与之相关的设置成本，但如果采取极端措施可能会导致性能下降。在您的情况下，每个页面都有一个 CSS 文件是不好的形式，因为这意味着浏览器更难缓存。

将一种方法发挥到极致是不好的做法，您应该尝试从广泛的角度来解决这个问题，例如：

正确压缩图像或使用 CSS sprites（减少 HTTP 请求）
使用 Expres、ETag 等实现适当的 Web 缓存（因此客户端不必重新请求所有内容）
使用 YUI 或其他类似工具优化您的 CSS 和 Javascript 文件
改进您的 CSS / javascript 代码以提高性能。某些 CSS 选择器可能会导致浏览器花费更长的时间来呈现页面
尽可能用纯 CSS 替换图像，例如背景颜色等。
对任何文本输出（即 html、css、js）使用 GZip 压缩

如有疑问，请查看 Google 主页的源页面。他们大量优化了该页面，它会为您提供很好的线索。

【讨论】：

您所说的是“视情况而定”，我非常同意。可以想象“更多的 css 文件，更频繁地缓存”效果更好的情况，以及“更少的 css 文件，更少缓存的频率”效果更好的其他情况。我想这仅取决于特定网站所经历的流量质量。
正是乔纳森。特别是关于您的 CSS 问题，我会将所有常用的（如果没有 那么多 的话，可能是所有）CSS 放入一个文件中，然后可能有一个或两个较小的 CSS 文件用于特殊页面。

【解决方案2】：

我会将所有 CSS 合并到一个 CSS 文件中。即使您有一些冗余样式不适用于所有页面，在使用 Gzip 压缩后，大小也应该足够小。在浏览器缓存它之后，大小不再重要。只需将所有 CSS 插入一个文件即可。但是，您有一个问题：不同页面的样式会发生变化。你必须走另一条路。例如，您可以这样做：

index.html
<div class="navigation_index"></div>

about.html
<div class="navigation_about"></div>

然后与导航类共享类似的样式，例如：

.navigation_about, .navigation_index {
color: #000;
}

并以不同的样式指定不同的选项：

.navigation_about {
font: sans-serif,
}
.navigation_index {
font: serif,
}

【讨论】：

虽然从带宽的角度来看，“单一的 honkin' CSS 文件”可能是最好的解决方案，但我从不喜欢维护只有全局样式的大型网站。不过，我将不得不更多地考虑这个选项。坦率地说，我忽略了它的可能性。
我有一个很大的网站，有一个相当大的 CSS 文件，但我处理的是组织起来的单独的小 CSS 文件。问题是我有一个批处理文件可以一起“编译”CSS。也许值得一试？
我会更进一步，建议使用 LESS CSS 预处理器进行编译。您将获得您所描述的将 css 动态合成到一个文件中的好处，以及 LESS 带来的灵活性。此外，通过 CSS 压缩器也不错。

【解决方案3】：

浏览器会缓存 css 文件的大小，所以我更喜欢用更少的请求制作更大的 css 文件。

但这不是规则，我只是尽量做到这一点。

【讨论】：

【解决方案4】：

废话，我认为理论上这取决于网站类型。如果人们要访问该站点的页面一次，并且只有一次并且有很多页面等等，那么分解的 css 文件最终会在图表上更好地工作。与网站或 Web 应用程序相比，所有内容都不断或经常受到影响，然后为每个页面专门/编译的 css 一开始可能会产生更大的影响（无论如何在图表上），但随后会被缓存，你会在很长一段时间内获胜运行较少的 http 请求的 b/c。然后在大众 css 歇斯底里的某个地方的某个地方出现了一些重叠。

现在摆脱图表，看看您的平均网站，除非您承担一些非常严重的流量，否则这可能无关紧要。但总体而言，我在这里投票支持后者。

【讨论】：