css - 1 个或多个文件中的所有 CSS？

Question

我有 1 个或 30 个 css 文件这一事实对我的网站有什么影响吗？我知道我必须有用于打印的特殊文件，但现在我谈论我可以在 1 个文件中拥有的其余 CSS，但我将它分成 30 个文件。

Answer 1

是的，要下载大量单独的文件会影响性能；您将通过组合它们来提高您网站的性能。

页面发出的 HTTP 请求数是页面加载时间的重要因素，因为：

• 浏览器必须等待所有请求完成，然后才能正确呈现页面并调用任何设置为在页面加载时运行的 Javascript。

• 浏览器对它们可以同时发出的 HTTP 请求的数量有限制。在某些浏览器中，该限制非常低（旧 IE 版本低至 2）。

• 您的服务器还将限制同时请求的数量。

如果您有很多单独的文件，所有这些问题都会降低您的网站速度。

拥有单独的文件是有充分理由的——例如，为了缓存，如果某些文件比其他文件更频繁地更改，您可能不希望它们与其他从不更改的文件合​​并——但在大多数情况下，您应该尽力做到减少页面必须发出的 HTTP 请求数。

不要觉得您必须将它们全部合并到一个文件中，但您绝对应该考虑尽可能减少数量。

此外，IE8 及更早版本对允许的 CSS 文件数量有相当严格的限制——它只允许 31 个 CSS 文件；任何超过该限制的 CSS 文件都会被忽略。你可能还没有达到这个极限，但听起来你已经危险地接近它了，如果你不知道它有可能会咬你一口。这个问题也可以通过简单地合并你的 CSS 文件来解决。

Answer 2

是的，确实如此，特别是如果您在一页加载时加载所有这些。30 个 http 请求而不是 1 个会产生很大的不同。

CSS 预处理器

如果您觉得分离 css 文件可以为您提供可读性等好处，那么值得考虑使用 CSS 预处理器，例如Less或Sass，因为它们允许您将单独的文件构建到一个样式表中。

Answer 3

是的，它确实。您拥有的 HTTP 请求越少，加载过程就越快。

您可以使用YSlow分析加载速度

Answer 4

是的，它确实会影响您网站的速度。

浏览器一次可以下载有限数量的资源（=并行 - 它在浏览器之间有所不同，但它来自一个域的大约 4 个源），因此如果您有太多单独的源导致大量 HTTP，它们将被“阻止”要求。浏览器必须等待完成这些请求，并且在此期间无法继续创建文档。

您应该始终尝试使用尽可能少的文件，缩小它们并可能压缩（gzip）它们。