《高性能网站建设指南》笔记-2 规则1——减少HTTP请求

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

 

图片地图 Image Maps

图片地图（Image Maps）允许你在一个图片上关联多个url。目标url的选择取决于用户单击了图片上的哪个位置。

如果一个导航栏中有5副图片，如果使用图片地图则可以更有效率，因为5个http请求被减少为1个http请求。响应时间将会降低，因为减少了http开销。

CSS Sprites

css Sprites可以将多幅图片合并为一幅单独的图片。

他的优点：通过合并图片减少http请求，并且比图片地图更灵活。另外一个优点：减低了下载量。很多人会认为合并后的图片会比分离的图片总和要大，因为合并的图片中包含有附加的空白区域。实际上，合并后的图片会比分离的图片的总和要小，这是因为他减低了图片自身的开销（颜色表，格式信息，等）。

如果需要在页面中为背景，按钮，导航栏，连接等提供大量图片，css Sprites绝对是一种优秀的解决方案——干净的标签，很少的图片和很短的响应时间。

内联图片 inline Images

 

合并脚本和样式表 combined scripts and stylesheets

一般来说，使用外部脚本和样式表对性能更有利。然而，如果遵循软件工程师所推荐的方式和模块化的原则将代码分开放在多个小文件中，会降低性能，因为每个文件都会导致一个额外的http请求。

和图片地图及css Sprites的优点一样，将这些单独的文件合并到一个文件中，可以减少http请求的数量并缩短最终用户的响应时间。