Question

哪一个更好更快？为什么？

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

css/style.css

或

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

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

我问的原因是我正在为网速非常低的用户开发网站。国家乌干达。所以我想尽快做到。

Answer 1

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

所以最好将它保存在一个文件中。只有当你想要保持IE特定的类分开时，才应该分离CSS。

Answer 2

根据雅虎的性能规则^[source]，非常重要来最小化HTTP请求

来自消息来源

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

使用组合文件进行开发非常不安，因此坚持使用多个文件进行开发，但是一旦在Web上部署系统，就应该合并这些文件。

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

它结合并缩小CSS

Answer 3

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

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

的好处

Answer 4

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

我建议使用Yslow这是firebug的一个很好的扩展，用于分析网页并提出改善其效果的方法。

Answer 5

一个css文件比多个css文件更好，因为最终用户的浏览器需要为每个文件发出多个请求。您可以做的其他事情可以改善性能，包括：

请注意，有一些工具可以帮助您执行此操作。有关详细信息，请参阅15 ways to optimise css