减少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 别忘了修改小老鼠
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
