第1章：减少HTTP请求

绪论A中介绍了性能黄金法则，法则揭示了只有10%_{20%的时间花费在接受HTML文档上，剩下的80%}90%都花费在所有组件的HTTP请求上（CSS，JS，图片，Flash等）。因此改善响应时间，最简单的途径就是减少组件的数量，并由此减少HTTP请求的数量。

从页面移除组件势必会引起产品和开发的矛盾，为了既满足产品需求，又使开发者提高网站的访问效率，本章提供了如下技术：

• 图片地图
• CSS Sprites
• 内联图片和脚本
• 样式表的合并

图片地图（Image Map）

超链接一般带有一些文本，比如<a>标签那样，并被关联到目标URL上，一种更为美观的做法是，将超链接关联到图片上，使用图片地图方式可以减少HTTP请求，而且无需改变页面外观。
图片地图允许你在一个图片上关联多个URL，目标URL取决于用户点击了图片上的哪个位置。

书上给了一个例子，我截了个图：

image.png

CSS Sprites

CSS Sprites同样可以合并图片，但是更为灵活。CSS Sprites就是将多个图片合并到一张单独的图片中。

image.png

看完了突然想起了QQ、微信的表情，还有富文本编辑器是不是也这么做的呢？
任何支持背景图片的HTML元素都可以使用CSS Sprites，比如div，span。
使用它们的background-position属性将HTML元素放到期望的位置上。
例如这样：

image.png
image.png
image.png

background-position属性指定了CSS Sprites的偏移量。

图片地图和CSS Sprites看起来非常类似，但是图片地图中的图片必须是连续的，CSS Sprites则没有这个限制。
它们都有一个优点就是通过合并图片减少HTTP请求，CSS Sprites还降低了下载量。
实际上，合并后的图片比分离的图片的总和要小，因为它降低了图片的开销（颜色表，格式信息等等）

所以，当页面中为背景，按钮，导航栏，链接等提供大量图片时，可以优先考虑CSS Sprites。

内联图片（Inline Image）

通过data：URL模式可以在Web页面中包含图片，而且无需任何额外的HTTP请求。
要注意IE7以下不支持这个属性，所以无法应用于IE7以下的IE浏览器。
data：URL模式的官方描述是，“允许将小块数据内联为‘立即数’”，数据就在URL中。
语法是这样的，以<img>标签为例。[;base64]为可选数据。
<img src="data:图片路径[; base64], 数据内容">

data:一般都用于内联图片，但它可以用在任何需要制定URL的地方，包括<scripts>和<a>标签。

当然，内联图片也是受限制的，IE7及以下版本不支持，而且在数据大小上也有限制，一般不能超过100kb。base64编码会增加图片的大小，因此整体下载量会增加。

合并脚本和样式表

尽量把多个js文件和css文件合并起来，因为每个文件都需要使用http请求，而为了加快响应速度，必须减少HTTP数量，这是核心思想。