多个 css 文件还是一个大 css 文件？答案

【问题标题】：Multiple css files or one big css file?多个 css 文件还是一个大 css 文件？
【发布时间】：2012-04-03 04:18:50
【问题描述】：

哪个更好更快？为什么？

仅使用一个文件进行样式设置：

css/style.css

或

使用多个文件进行样式设置：

css/header.css
css/contact.css
css/footer.css
css/tooltip.css

我问它的原因是我为互联网速度非常低的用户开发了一个网站。国家乌干达。所以我想让它尽可能快。

【问题讨论】：

标签： html css

【解决方案1】：

对于将多个 CSS 或 JavaScript 文件捆绑或组合到更少的 HTTP 请求中，这始终是一个更好的解决方案。这会导致浏览器请求更少的文件，从而减少获取它们所需的时间。通过适当的缓存，您可以获得额外的带宽和更少的 HTTP 请求。

更新：有一个您可能感兴趣的新 Bundling feature in ASP.Net 4.5。这允许您在编译时分离 css 文件，并在运行时获得将资源组合到 one 资源中的好处

【讨论】：

【解决方案2】：

根据 Yahoo 的性能规则 ^[source]，非常重要尽量减少 HTTP 请求

来源

组合文件是一种通过将所有脚本组合成一个脚本来减少 HTTP 请求数量的方法，并且类似地组合将所有 CSS 合并到一个样式表中。合并文件更具挑战性当脚本和样式表因页面而异时，发布过程的这一部分可以缩短响应时间。

使用组合文件进行开发非常不方便，因此请坚持使用多个文件进行开发，但是一旦将系统部署到网络上，您应该将文件组合在一起。

我真的建议使用样板的 ant 构建脚本。你可以找到它here。

它合并和缩小 CSS

【讨论】：

【解决方案3】：

一个 css 文件比多个 css 文件好，因为最终用户的浏览器对每个文件发出多个请求所涉及的开销。您可以做的其他事情来提高性能包括：

请注意，有一些工具可以帮助您做到这一点。更多信息请见15 ways to optimise css

【讨论】：

【解决方案4】：

一个资源文件始终是最快的方法，因为您减少了为获取这些文件而发出的 HTTP 请求数。

我建议使用Yslow，它是firebug 的一个很好的扩展，可以分析网页并提出改进其性能的方法。

【讨论】：

【解决方案5】：

使用单个文件更快，因为它需要更少的 HTTP 请求（假设加载的样式数量仍然相同）。

因此最好将其保存在一个文件中。仅当您希望将 IE 特定类分开时，才应进行分离 CSS。

【讨论】：