WPO基础：减少HTTP请求
减少HTML文档的组件数量，也因此减少了HTTP请求的数量，从而节约了载入网页的时间。《高性能网站建设指南》中介绍到四种方法：
- 使用图片地图
- 采用CSS Sprites
- 采用内联图片
- 合并CSS样式表和JS脚本
对于网店尤其是Zen-Cart网店来说，最后一种方法是很有效的。因为Zen-Cart为了模块化和易读性考虑，将样式表和脚本分的很细，本来一个CSS文件搞掂的，可能会被划分成10个文件，并且分布在不同目录中。减少http请求的最快的方法，就是合并脚本和样式表，可以显著节省页面打开时间。
?
以Zen-Cart 1.39版本为例，下面是<head>区常见的一段代码
<link rel=”stylesheet” type=”text/css” href=”includes/templates/theme_name/css/stylesheet.css” /><link rel=”stylesheet” type=”text/css” href=”includes/templates/theme_name/css/stylesheet_boxes.css” /><link rel=”stylesheet” type=”text/css” href=”includes/templates/theme_name/css/stylesheet_css_buttons.css” /><link rel=”stylesheet” type=”text/css” href=”includes/templates/theme_name/css/stylesheet_main.css” />?
<link rel=”stylesheet” type=”text/css” href=”includes/templates/theme_name/css/stylesheet_tm.css” />
<link rel=”stylesheet” type=”text/css” media=”print” href=”includes/templates/theme_name/css/print_stylesheet.css” />
上述形式如 stylesheet*.css的6个文件，完全可以统一成一个 stylesheet.css 文件。这样就减少了5次http查询。
?
下面我们对BuyOnMe.com?做了一个合并CSS样式表文件的实验。
?
网站首页共有四个可合并的CSS文件，前三个出现在<head>区，最后一个出现在网页中
<link rel=”stylesheet” type=”text/css” href=”includes/templates/zj_orange/css/style_jscroller.css” /><link rel=”stylesheet” type=”text/css” href=”includes/templates/zj_orange/css/stylesheet.css” /><link rel=”stylesheet” type=”text/css” href=”includes/templates/zj_orange/css/stylesheet_css_buttons.css” />……?
<link rel=”stylesheet” type=”text/css” href=”includes/templates/zj_orange/css/buyonme_categories.css” />
?
时间瀑布图显示需要204ms打开前面三个CSS文件，然后需要额外的96ms打开最后一个css文件。
?
图6-29：CSS合并前的时间瀑布
?
?
我们进入 includes/templates/zj_orange/css/ 目录，将三个CSS文件合并为一个文件stylesheet_all.css。
?
网站首页在合并后只有一个的CSS文件stylesheet_all.css
<link rel=”stylesheet” type=”text/css” href=”includes/templates/zj_orange/css/stylesheet_all.css” />?
时间瀑布图显示打开stylesheet_all.css也只需要200ms，而这是四个CSS文件的合体。
图6-30：CSS合并后的时间瀑布
?
我做了十几次测试，节省的时间从90ms到500ms，不过大多数都维持在100ms左右。 : ) 似乎在性能上，只节省了100ms，性能提升的比率并不大。而实际上浏览器和网络环境千差万别。在某些情况下，打开4个http请求，也就意味着有4次机会遇到网络不稳定、浏览器发神经或者其他莫名其妙的延迟因素。所以合并CSS减少http请求，好处大于坏处。
?
作者:?谭砚耘@用户体验与可用性设计-科研笔记
版权属于:?谭砚耘 （TOTHETOP至尚国际?）
版权所有。转载时必须以链接形式注明作者和原始出处
http://www.webusability.cn/reduce-http-request-howto-wpo-1300/
如果你希望与作者交流，请发送邮件到?tanyanyun/at/163.com?别忘了修改小老鼠
?
?
2 楼 mooring 2012-03-16 这里仅是针对首次加载吧
如果有本地缓冲的话,二者区别应该不会很大
在有缓冲的情况下,如果样式修改了,那得重新加载一次合并后的"大"文件,或者只加载一个或两个"小"文件,如果"大"和"小"的数量都是1的话,差别就在加载时间上了,如果小 大于 1的话,那么需要再测试一下,不能一概而论. 3 楼 100Continue 2012-03-16 在前端修改最小的减少js和css请求的方法是，使用tengine（nginx淘宝版本）的concat模块，该模块能够通过类似于这样的url（http://example.com/??style1.css,style2.css,foo/style3.css）将style1.css ，style2.css 和 foo/style3.css这三个脚本通过一次请求进行获取。 4 楼 谭砚耘 2012-03-19 100Continue 写道在前端修改最小的减少js和css请求的方法是，使用tengine（nginx淘宝版本）的concat模块，该模块能够通过类似于这样的url（http://example.com/??style1.css,style2.css,foo/style3.css）将style1.css ，style2.css 和 foo/style3.css这三个脚本通过一次请求进行获取。
好，学习了。有没有相关的比较权威的资料？ 5 楼 100Continue 2012-03-19 谭砚耘 写道100Continue 写道在前端修改最小的减少js和css请求的方法是，使用tengine（nginx淘宝版本）的concat模块，该模块能够通过类似于这样的url（http://example.com/??style1.css,style2.css,foo/style3.css）将style1.css ，style2.css 和 foo/style3.css这三个脚本通过一次请求进行获取。
好，学习了。有没有相关的比较权威的资料？
关于 concat模块，可以看这里：https://github.com/perusio/nginx-http-concat 里面有开源代码及使用方法的详细介绍 6 楼 谭砚耘 2012-03-19 100Continue 写道谭砚耘 写道100Continue 写道在前端修改最小的减少js和css请求的方法是，使用tengine（nginx淘宝版本）的concat模块，该模块能够通过类似于这样的url（http://example.com/??style1.css,style2.css,foo/style3.css）将style1.css ，style2.css 和 foo/style3.css这三个脚本通过一次请求进行获取。
好，学习了。有没有相关的比较权威的资料？
关于 concat模块，可以看这里：https://github.com/perusio/nginx-http-concat 里面有开源代码及使用方法的详细介绍
非常感谢！
