如何减少css http请求？

Question

如何减少css http请求？

1大的css文件

其导入其他所有CSS

是这同

或一个css文件？

什么是使用这种

 
@import url('/css/typography.css'); 
@import url('/css/layout.css'); 
@import url('/css/color.css'); 

Answer 1

1大的css文件 或进口的所有其他CSS 一个CSS文件，这是一样的吗？

没有作为客户端仍然需要加载每个CSS文件（各一个HTTP请求）

一些链接了解更多关于减少HTTP请求：

• Yahoo Best Practices
• Blog-post about the same topic

如果您使用的是Firefox，我强烈建议Firebug，它提供了有关HTTP请求的详细信息的视图。
编辑：
作为flybywire在评论中指出：YSlow是一个Firefox扩展Firebug的集成，分析网页性能

3个简单的事情，我会尝试先：

• 结合全球CSS（ 在每个页面上使用的东西）
• 压缩CSS（使用YUI compressor或某些在线工具）
• 在线指定页面的东西 （未中 网页共享的东西）

大多数的那些东西也适用于JavaScript文件。

Answer 2

样式进口依旧会触发一个HTTP请求的好处。我建议只提供一个CSS文件。您可以使用从服务器端导入的多个CSS文件来发送一个文件，而无需管理单个文件中的所有CSS规则。

Answer 3

您可以使用HTTP请求的组合来指定哪些应该作为一个缩小的css文件浏览器常见的CSS文件的列表。这将减小规模，并使请求的数量显着下降。

这个工作在.NET方面的一个很好的例子： http://www.codeproject.com/KB/aspnet/HttpCombine.aspx

Answer 4

如果您正在使用asp.net mvc的 - 退房this approach。仍然像一个魅力。基本上 - 它使用httphandler来合并，压缩和缓存资产文件。

但这是特定于asp.net。无法分辨是否有帮助。

---

Offtopic：

可以申请JavaScript文件相同的技术（这感觉太棒了有很好的结构化的js文件和静止 - 避免许多HTTP请求）。

对于图像 - 检查出spriting。这bookmarklet也可以相当有帮助。

Answer 5

你想要减少http请求的数量或大小吗？

我建议把所有最常用的选择为一个大的CSS文件（用于所有的库/插件一起），并与在线优化/极小再压缩它

Answer 6

我写了一些这方面的博客文章。见Supercharging CSS in PHP。尽管它是为PHP编写的，但其原理是通用的。

基本上你的目标是减少外部HTTP请求。您可以结合使用CSS文件和/或版本控制CSS文件，并使用远期Expires标题来完成此操作。

最后，如果客户端接受它，你应该总是使用GZip CSS（和Javascript）。

Answer 7

如果你想从一个Web场服务你的CSS文件，或者它是一个高容量的网站，我建议在看看： http://code.google.com/p/talifun-web/wiki/CrusherModule 它使用一个文件的专家以寻找关于CSS/JS变化文件。 Css/js文件属于web.config中指定的文件集。当在组件js/css文件中检测到更改时，它会为文件集创建新的css或jss。

它还具有输出css/js文件集链接的简单控件。该控件将追加一个查询字符串与文件的散列，所以你保证正确的文件内容。

这意味着您可以直接为IIS提供远程文件。然后你可以利用内核模式缓存。同时也意味着你不需要担心的HTTP头支持车实现：

• ETag的
• 过期
• 的Last-Modified
• 的if-match
• 如果 - 无 - 匹配
• If-Modified-Since
• If-Unmodified-Since
• If-Modified-Since

最好将你所有的js/css文件压缩成整个网站的一个巨型文件，然后动态地为页面提供所需的js/css文件。浏览器可以缓存一个巨大的文件，然后再也不用担心从您的站点再次下载css/js。