css - CSS速度优化 - 为什么多个文件比一个更好？

Question

HTTP 请求越少越好，对吧？

关于谷歌最佳实践的解释，少用的 css 规则也更好。

• 浏览器的 CSS 引擎必须评估文件中包含的每个规则，以查看该规则是否适用于当前页面。
• 即使样式表位于缓存的外部文件中，渲染也会被阻止，直到浏览器从磁盘加载样式表。

在您看来，什么可以提供更好的性能：

• 每页一个 css 文件。
• 一种将被缓存的通用 css（即使有 +70% 未使用的 css / 但避免任何其他 http 请求）。

谷歌速度最佳实践

Answer 1

Google 最佳实践文档中要注意的重要句子之一是“通常，许多网站为所有页面重用相同的外部 CSS 文件，即使其中定义的许多规则不适用于当前页面” .

需要考虑这一点，就好像 css 文件有额外的代码，如果用户不访问这个冗余代码应用的页面，那么我们肯定会浪费带宽，这可能不是一个适当的权衡额外的 HTTP 请求。

这会导致加载文件的额外时间以及评估该冗余代码所浪费的时间。

当然，仅对单个页面使用多个文件（例如不同的页眉/页脚 css 文件）将是一种不好的做法。

如您所知，任何问题都没有完美的解决方案。你必须选择最适合你需要的东西。

因此，我会说使用多个文件或单个文件的决定完全基于网站的整体结构和其他权衡。

Answer 2

加载 CSS 通常非常快。CSS 阻塞是你可能永远无法捕捉到的东西。而 JavaScript 则可以让您在视觉上意识到它正在被下载。（渲染页面时的空白）。实际上，一个 CSS 就足够了，因为一个 HTTP 请求。优化应该针对 JavaScript，因为这是您可以看到页面变慢的地方。我们在这里谈论的是第二个或更少的差异。

这是一个您可以在其中输入 URL 并检查加载时间的站点。在下图中，您可以比较 CSS 加载时间。