我们被告知每次页面加载的 HTTP 请求越少越好。 CSS 的极端形式是每个页面有一个唯一的 CSS 文件，每个文件中复制任何共享的站点范围样式。
但这里需要权衡取舍。如果您有单独的共享全局 CSS 文件，它们可以在加载首页时缓存一次，然后在多个页面上重复使用，从而减少页面特定 CSS 文件的必要大小。
那么在现实世界中哪个更好呢？通过多个可缓存的离散 CSS 文件来缩短 CSS 文件，或者通过更少但更大的 CSS 文件来减少 HTTP 请求？
最佳答案
您的第一个停靠港正在使用 YSlow或 Google Speed找出您网站上最慢的内容。有时，一两个压缩不当的(大)图像可能会减慢整个过程。你被告知要减少 HTTP 请求，因为每个请求都有与之相关的设置成本，但如果采取极端措施可能会导致性能下降。在您的情况下，每个页面都有一个 CSS 文件是错误的形式，因为这意味着浏览器更难缓存。
将一种方法发挥到极致是一种不好的做法，您应该尝试从更广的 Angular 来解决这个问题，例如:
- 适当压缩图片或使用 CSS sprites(减少 HTTP 请求)
- 使用 Expres、ETag 等实现适当的网络缓存(因此客户不必重新请求所有内容)
- 使用 YUI 优化您的 CSS 和 Javascript 文件或其他类似工具
- 改进您的 CSS/javascript 代码以提高性能。某些 CSS 选择器可能会导致浏览器花费更长的时间来呈现页面
- 尽可能用纯 CSS 替换图片，例如背景颜色等。
- 对任何文本输出使用 GZip 压缩，例如 html、css、js
如有疑问，请查看 Google 主页的源页面。他们对该页面进行了大量优化，它会为您提供有关操作的良好线索。
关于css - 我应该瞄准更少的 HTTP 请求还是更多可缓存的 CSS 文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2685520/