构建高性能网站的14条法则（15-1）
1、减少HTTP请求
80%的终端用户响应时间花在了前台。其中，大部分时间都用于下载页面中的各种组件——图像、样式表、脚本、Flash等等。因此，减少组件的数量就能够减少呈现页面所需的HTTP请求数量。这正是加速网页显示的关键所在。
减少页面中组件的一种思路是简化页面的设计。然而，是否存在一种既能使页面内容丰富，又可以加速响应时间的方案呢？以下就是一些既能够减少HTTP请求数量，又可以确保页面内容丰富的技术。
通过图像地图将多幅图像组合为一幅图像。这样一来，虽然整体尺寸相同，但可以减少HTTP请求，进而加速页面显示。不过，图像地图只适用于页面中连续的图像，比如导航条。而且，定义图像地图中的坐标值通常会令人头疼，也容易出错。
- 未使用图像地图的例子：http://stevesouders.com/hpws/imagemap-no.php
- 使用了图像地图的例子：http://stevesouders.com/hpws/imagemap.php
“CSS精灵”是减少图像请求次数的首选方法。所谓“CSS精灵”，就是将页面中要用到的所有图像都组合到一幅图像中，然后通过CSS中的background-image和background-position属性，按照需要显示这幅图像中的不同部分。
- 使用CSS精灵的例子：http://stevesouders.com/hpws/sprites.php
- 推荐一个经典的例子：http://www.cssplay.co.uk/menu/streaker（别忘了“查看源代码”！）
使用data: URL模式在实际的页面中嵌入图像数据。不过，这种方案会增大HTML文档的尺寸。因此，将嵌入图像与（缓存的）样式表结合使用，是一种既能减少HTTP请求，又可以避免增大页面尺寸的方法。
data:URL模式提出于1995年，相应的规范地址为：http://tools.ietf.org/html/rfc2397 。使用格式为：
data:[<mediatype>][;base64],<data>
嵌入的红星图像可以像下面这样指定：
<IMG ALT=”Red Star”
src=”data:image/gif;base64,R0lGODlhDAAMALMLAPN8ffBiYvWW
lvrKy/FvcPewsO9VVfajo+w6O/zl5estLv/8/AAAAAAAAAAAAAAAACH5BAEA
AAsALAAAAAAMAAwAAAQzcElZyryTEHyTUgknHd9xGV+qKsYirKkwDYiKDBia
tt2H1KBLQRFIJAIKywRgmhwAIlEEADs=”>
使用嵌入图像的问题是，IE（直至IE7）不支持嵌入图像；另外，Firefox将嵌入图像的大小限制为100K。虽然使用64位编码可以增大图像尺寸，但也会增加相应的下载时间。
- 使用嵌入图像的例子：http://stevesouders.com/hpws/inline-images.php
- 在CSS中使用嵌入图像的例子：http://stevesouders.com/hpws/inline-css-images.php
另外，整合文件也是减少HTTP请求数量的一种方案。比如，可以把所有脚本都整合到一个脚本文件中。类似地，也可以把所有样式表都整合到一个样式表中。实际上，整合文件是一种尚未见到广泛应用的简单思路。在美国前10大网站中，每个页面平均包含七个脚本和两个样式表。当希望整合的脚本和样式表在不同页面之间有所差别的情况下，整合文件也将面临挑战。但是，即使在最终发布的网站中只能整合一部分文件，也能够起到改善响应时间的作用。
减少页面中HTTP请求的数量是改善前端性能的出发点。而且也是针对首次访问用户改善网站性能的最重要方针。正如Tenni Theurer在他的博客文章Browser Cache Usage - Exposed!中所揭示的：在你网站的日常访问者当中，40~60%访问者的缓存都是空的。因此，让自己的页面能够在这些首次访问的用户屏幕中快速地显示出来，是提升用户体验的关键。