规则1 减少HTTP请求

改善响应时间的最简单途径就是减少组件的数量，并由此减少http请求的数量。本章介绍的技术即可以减少http请求，又能避免在性能和设计之间的冲突。

图片地图

一个导航栏上有五幅图片，点击一个图片会将你带到与之相关的链接。这可以通过五个分开的超链接、使用五个分开的图片来实现。然而，如果使用一个图片地图则可以更有效率，因为五个http请求被减少为只有一个http请求。响应时间将会降低，因为减少了HTTP开销。

图片地图有两种类型。服务器端图片地图将所有点击提交到同一个目标URL,向其传递用户点击的x、y坐标。web应用程序将该x、y坐标映射为适当的操作。客户端图片地图更加典型，因为它可以将用户的点击映射到一个操作，而无需向后端应用程序发送请求。映射通过html的map标签实现。

<img usemap="#map1" border=0 src="/images/imagemap.gif?t=1196816255">
<map name="map1">
    <area shape="rect" coords="0,0,31,31" href="home.html" title="Home">
    <area shape="rect" coords="36,0,66,31" href="gifts.html" title="Gifts">
    <area shape="rect" coords="71,0,101,31" href="cart.html" title="Cart">
    <area shape="rect" coords="106,0,136,31" href="setting.html" title="Settings">
    <area shape="rect" coords="141,0,171,31" href="help.html" title="Help">
</map>

使用图片地图也有缺点。在定义图片地图上的区域坐标时，如果采取手工的方式则很难完成且容易出错，而且除了矩形之外几乎无法定义其他形状。

CSS Sprites

和图片地图一样，CSS Sprites也可以合并图片，但更为灵活，任何支持背景图片的html元素都可以使用，如span或div。它和图片地图几乎一样快。图片地图中的图片必须是连续的，而css sprites则没有这个限制。

还有一个令人惊奇的优点，合并图片还降低了下载量，很多人会认为合并后的图片会比分离的图片的总和要大，因为合并后的图片中包含有附件的空白区域，但是实际上，它降低了图片自身的开销（颜色表、格式信息等等）。
如果需要在页面中为背景、按钮、导航栏、链接等提供大量图片，css sprites绝对是一种优秀的解决方案。——干净的标签、很少的图片和很短的响应时间。

内联图片

通过使用data:URL模式可以在web页面中包含图片但无需任何额外的HTTP请求。data:URL模式规范对它的描述为：允许将小块数据内联为立即数。数据就在其url自身之中，其格式如下：

data:[<mediatype>][;base64],<data>

一个红色五角星形状的内联图片可以定义为：

该模式数据大小会有所限制。Base64编码会增加图片的大小，因此整体下载量会增加。

内联图片在跨越不同页面时不会缓存，所以不要去内联公司的logo图片，编码过的logo会导致页面变大。聪明的做法是使用css并将内联图片作为背景。将该css规则放在外部样式表中，这意味着数据可以缓存在样式表内部。
它和图片地图及css sprites的响应时间几乎一样，虽然外部样式表增加了一个额外的http请求，但被缓存后可以得到额外的收货。

合并脚本和样式表

前端工程师必须选择是对js和css进行“内联”（也就是将其嵌在html文档中）还是将其放在外部的脚本和样式表中。一般来说，使用外部脚本和样式表对性能更有利。然而，如果遵循模块化的原则将代码分开放到多个小文件中，会降低性能，因为每个文件都会导致一个额外的http请求。

在理想情况下，一个页面应该使用不多于一个的脚本和样式表。

将所有的javascript合并为一个单独的文件在开发环境中很难完成。解决
的方法是遵循编译型语言的模式。保持javascript的模块化，而在生成过程中从一组特定的模块生成一个目标文件。

合并文件是很容易的，难的是如果页面需要大量的模块，组合的数量就会非常庞大。每个页面不一定会使用到每个模块，这值得花时间去分析一下你的页面，确保组合的数量是管理的。

小结

遵守减少Http请求的规则可以同时改善首次浏览和后续浏览的网站响应时间。