我应该针对更少的HTTP请求或更多可缓存的CSS文件吗？

Question

我们被告知每页加载的HTTP请求越少越好。 CSS的极端形式是每页有一个唯一的CSS文件，每个文件中都有重复的共享站点范围样式。

但那里有一个交易。如果您有单独的共享全局CSS文件，则可以在加载首页时对其进行一次缓存，然后在多个页面上重复使用，从而减少页面特定CSS文件的必要大小。

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

Answer 1

我会将所有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,
}

Answer 2

您的第一个停靠点是使用YSlow或Google Speed来确定您网站上最慢的内容。有时，压缩（大）的图像或两个图像可能会使整个图像变慢。您被告知要减少HTTP请求，因为每个请求都有与之关联的设置成本，但如果采取极端情况可能会导致性能下降。在你的情况下，每个页面都有一个CSS文件是不好的形式，因为这意味着浏览器很难缓存。

将一种方法推向极端是不好的做法，你应该尝试从广角来解决这个问题，例如：

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

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

Answer 3

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

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

Answer 4

好的废话，我认为理论上它取决于网站类型。如果人们打算一次点击网站的页面，而且只打算一次，并且有很多页面等等，那么打破css文件最终会在图表上更好地运行。对于一个网站或网络应用程序，无论如何，一切都经常受到打击，然后为每个页面设置专门/编译的CSS可能会有一个更大的打击（无论如何在图表上），但然后得到缓存，你赢得了长期运行较少http请求的b / c。然后有些重叠 - 在大规模css歇斯底里的幽冥地区某处重叠。

现在远离图表并查看您的平均网站，除非您承担一些非常严重的流量，否则可能无关紧要。但总体来说，这里投票给后者。