高性能网站建设学习笔记----减少图片请求

1、图片地图：

将多张图片合并为一张图片，通过img标签的usemap来定义该张图片显示的区域

<img usemap="#map1" border=0 src="a.gif">

<map name="map1">

    <area shape="rect" coords="12,4,32,31" href="home.html" title="home"/>

    <area shape="rect" coords="39,0,66,31" href="color.html" title="color"/>

    <area shape="rect" coords="71,23,1,12" href="car.html" title="car"/>

</map> 

shape：定义图片的形状

coords:要定义的图片所在区域坐标

href：链接地址

title：tips

图片地图的缺点在于难以定位所需图片的区域，而且除了矩形之外几乎无法定义其他形状,图片必须是连续的图，例如

2、css sprite

以css更为灵活的方式实现图片地图的效果

通过background-position属性指定css sprite偏移量来定位图片区域,图片不必是连续的，可以在任意位置

3、内联图片

通过data：URL模式可以在web页面中包含图片但无需任何额外的http请求。IE目前不支持这种方式。

data：URL模式：允许将小块数据内联为“立即数”，数据就在其自身的url中。格式为--data:[<mediatype>][;base64],[data]

<img src="data:image/gif;base64,.....">

4、合并样式表和脚本文件

5、添加expires头（非第一次访问）

web服务器通过expires头来告诉客户端它可以使用一个组件的缓存副本，直至某个时间为止。Expires：Thu, 15 Apr 2011 21:00:00 GMT

缺点：客户端与服务器端时间需同步

        过期日期需检查，防止日期失效，失效后要更改为一个新的日期

6、Cache-Control头（http1.1，克服expires头的限制）（非第一次访问）

     Cache-Control：max-age=320000000000

     max-age用来指定从请求开始过去小于320000000000秒时间内将使用缓存副本。

7、mod_expires Apache（非第一次访问）

     在使用Expires头时能够像max-age那样以相对的方式设置日期，它同时在相应中发送Expires头和Cache-Control max-age头

     格式： ExpiresDefault "<base> [plus] {<num> <type>}*"

当文件做出改变时，客户端将如何获取更新呢？修改文件名。将文件名作为变量来嵌入html中。