《一》减少 HTTP 请求的数量

性能黄金法则揭示了只有10%-20%的最终用户响应时间花在接收所请求的 HTML 文档上，剩下80%-90%时间花在为 HTML 文档所引用的所有组件（图片、脚本、样式表、Flash 等）进行的 HTTP 请求上。因此改善响应时间最简单的途径就是减少组件的数量，并由此减少 HTTP 请求的数量。

浏览器会并行地执行 HTTP 请求，那为什么 HTTP 请求的数量会影响响应时间呢？浏览器不能一次性地将它们都下载下来吗？
对此的解释要回到 HTTP1.1 规范，该规范建议浏览器从每个主机名并行地下载两个组件。
每个主机名并行下载两个组件的限制只是一个建议。用户可以重写该默认配置。前端工程师与其依赖用户来修改浏览器设置，不如简单地使用 CNAME（DNS 别名）来将组件分别放到多个主机名中。但增加并行下载数量并不是没有开销的，其优劣取决于带宽和 CPU 速度，过多的并行下载反而会降低性能。研究表明，使用两个主机名比使用1、4或10个主机名能带来更好的性能。

图片地图（image map）：

图片地图允许在一个图片上关联多个 URL，目标 URL 的选择取决于用户单击了图片上的哪个位置。

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

图片地图有两种类型：

1. 服务器端图片地图：将所有点击提交到同一个目标 URL，向其传递用户单击的 x、y 坐标。

2. 客户端图片地图：通过 HTML 的 <map> 标签来实现。
   <map> 标签被用于定义客户端图像地图，即一个具有可点击区域的图像。name 属性用于定义图像地图的名称，它是 <map> 标签的必选属性，通过将 <map>的 name 赋值给 <img> 的 usemap 属性，以在二者之间建立起联系。

   为了保证浏览器的兼容性，最好同时指定 name 和 id。

   <map> 标签只是一个容器，其中包含一组 <area> 标签，正是这些 <area> 标签定义了图像地图里的可点击区域。

   <img src="planets.jpg" usemap="#planetmap" alt="Planets" />
   
   <map name="planetmap" id="planetmap">
     <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
     <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
     <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
   </map>
   

   点击上面例子中的图片不同的指定区域，将会跳转到不同的链接。

如果在导航栏或其他超链接中使用多个图片，将它们转换为图片地图是加速页面的最简单的方式。

CSS 精灵（CSS Sprites）/雪碧图：

CSS Sprites 允许将小图片整合到一张大图片中，利用 css 中的 background-image 属性、background-position 属性定位某个图片位置，来达到在大图片中引用某个部位的小图片的效果。CSS Sprites 通过合并图片减少 HTTP 请求，并且比图片地图更灵活，而且它还降低了下载量。

很多人认为合并后的图片会比分离的图片的总和要大，因为合并的图片中包含有附加的空白区域；实际上，合并后的图片会比分离的图片的总和要小，这是因为它降低了图片自身的开销（颜色表、格式信息等的）。

例如，修改图片地图中的示例：一个名为 navbar 的 div 包含了五个链接；每个链接都包裹一个 span，它们使用同一个大的背景图片，通过 background-position 属性指定了 CSS Sprites 的偏移量。

<div id="navbar">
	<a href ="home.html"><span class="home"></span></a>
	<a href ="gifts.html"><span class="gifts"></span></a>
	<a href ="cart.html"><span class="cart"></span></a>
	<a href ="settings.html"><span class="settings"></span></a>
	<a href ="help.html"><span class="help"></span></a>
<div>

#navbar span{
	width: 40px;
	height: 40px;
	background-image: url(/images/spritebg.gif);
}
.home { background-position: 0 0; }
.gifts { background-position: -40px 0; }
.cart { background-position: -80px 0; }
.settings { background-position: -120px 0; }
.help { background-position: -160px 0; }

如果需要在页面中为背景、按钮、导航栏、链接等提供大图片，CSS Sprites 是一种优秀的解决方案。

内联图片（inline images）：

通过使用 data:URL 模式可以在 Web 页面中包含图片但无需任何额外的 HTTP 请求。

data:URL 的数据就在其 URL 自身之中，其格式如下：data: [<mediatype][;base64],<data>。

<img src=“data:image/png;base64,图片的base64编码" />

data:URL 模式的缺陷是可能存在数据大小上的限制；并且 base 64 编码会增加图片的大小，因此整体下载量会增加；而且，由于 data:URL 是内联在页面中的，在跨越不同页面时不会被缓存。

针对由于 data:URL 是内联在页面中的，在跨越不同页面时不会被缓存这个问题，可以使用 CSS 并将内联图片作为背景，将该 CSS 规则放在外部样式表中，这意味着数据可以缓存在样式表内部。
将内联图片放置在外部样式表中增加了一个额外的 HTTP 请求，但被缓存后可以得到额外的收获。

合并脚本和样式表：

和图片地图及 CSS Sprites 的优点一样，合并脚本和样式表可以减少 HTTP 请求的数量并缩短最终用户响应时间。

使用 HTTP 缓存：

使用 HTTP 缓存来减少 HTTP 请求的数量，并减少 HTTP 响应的大小，使 Web 页面加载得更快。

HTTP 缓存应该包含任何不经常变化的组件，包括图片、脚本、样式表和 Flash 等，但是，不应该包括 HTML，因为它包含动态内容。

Expires ：

Web 服务器使用 Expires 头来告诉 Web 客户端它可以使用一个组件的当前副本，直到指定的时间为止。它在 HTTP 响应中发送。

如果为页面中的一个图片返回了这个头，浏览器在后续的页面浏览中会使用缓存的图片，将 HTTP 请求的数量减少一个。

Cache-Control ：

HTTP 1.1 引入了 Cache-Control 头来克服 Expires 头的限制。因为 Expires 头使用一个特定的时间，它要求服务器和客户端的时钟严格同步；另外，过期日期需要经常检查，并且一旦未来这一天到来了，还需要再服务器配置中提供一个新的日期。

Cache-Control 使用 max-age 指令指定组件被缓存多久，它以秒为单位定义了一个更新窗，如果从组件被请求开始过去的秒数少于 max-age，浏览器就使用缓存的版本，这就避免了额外的 HTTP 请求。

修订文件名：

如果将组件配置为可以由浏览器代理缓存，当这些组件改变时用户如何获得更新呢？

当有 Expires 头和 Cache-Control 头时，直到过期日期为止一直会使用缓存的版本，浏览器不会检查更新，直到过了过期日期，因此，即使在服务器上更新了组件，已经访问过网站的用户也不大可能获取最新的组件，因为前一个版本已经在他们的缓存中了。

为了确保用户能获取组件的最新版本，需要在所有 HTML 页面中修改组件的文件名，这样，全新的请求将从原始服务器下载最新的内容。

可以为所有组件的文件名使用变量；或者将版本号嵌在组件的文件名中等。