规则1 — 减少HTTP请求

在进行性能优化时，关键是剖析当前的性能，找到在哪里能够获得最大的改进。

性能黄金法则：

只有10%_{20%的最终用户响应时间花在了下载HTML文档上，其余的80%}90%时间花在了下载页面中的所有组件上。

1. 图片地图

现在很多网站都是图片形式的导航，点击图片跳转到对应的链接。如果导航项目很多的话，图片的数量就会很多，每需要加载一张图片就会多一个HTTP请求。优化的方式之一就是使用图片地图

<img src="planets.gif" alt="Planets" usemap ="#planetmap" />

<map id="planetmap">
 <area shape ="rect" coords ="0,0,110,260" href ="sun.htm" alt="Sun" />
 <area shape ="circle" coords ="129,161,10" href ="mercur.htm" alt="Mercury" />
 <area shape ="circle" coords ="180,139,14" href ="venus.htm" alt="Venus" />
</map>

2. CSS Sprites

CSS Sprites 和比图片地图方案好。

3. 内联图片

适用于图片小于2KB，页面引用图片不多的情况。将图片转换为base64编码字符串inline到CSS或页面中，减少http的请求次数。

<img src="data:image/png;base64,iVAGRw0KGDCFGNSUhEUgACBBQAVGADCAIATYJ7ljmRGGAAGElEVQQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPACCCTElFTEVBQmGA" />

image/png - 数据类型名称

base64 - 数据的编码方法

iUANR.... - 编码后的数据

: , ; - data URI scheme 指定的分隔符号

4. 合并脚本和样式表