规则1 减少HTTP请求

1. 由性能黄金法则得知，改善响应时间的最简单途径就是减少组件的数量，并由此减少HTTP请求的数量。

 

2. 图片地图

    a. 允许在一个图片上关联多个URL，目标URL的选择取决于单击图片哪个位置；

    b. 服务器端图片地图：所有点击提交到同一URL，向其传递用户点击的x，y坐标。Web将x，y映射为适当的操作；

    c. 客户端图片地图：将用户点击映射到指定操作。通过HTML的MAP标签实现；

    d. 缺点：区域坐标难确定，通过DHTML创建的图片地图在IE下无法工作。

    e. <img usemap="#map1" border=0 src="/image/imagemap.gif?t=1196816225">

　　  <map name="map1">

　　　　<area shape="rect" coords="0,0,31,31" href="home.html" title="Home">

　　　　<area shape="rect" coords="36,0,66,31" href="gifts.html" title="Gifts">

　　　　...

       </map>

 

3. CSS Sprites

    适用于任何支持背景图片的HTML元素。使用CSS的background-position属性，可以将HTML元素防止到背景图片期望的位置上，指定宽高；

　 background-origin:规定背景图片的定位区域（CSS3 默认是padding-box）；background-clip 属性规定背景的绘制区域（CSS3 默认是border-box）；

    通过合并图片降低HTTP请求，实际上它还降低了下载量，因为它降低了图片自身的开销；（颜色表、格式信息 即便合并图片中多了附加的空白区域）

    图片地图里的图片必须是连续的，CSS Sprites则没有这个限制。

 

4. 内联图片

    a. 使用data：URL模式可以在Web页面中包含图片但无需任何额外的HTTP请求；（IE不支持）

    b. data：URL模式 允许将小块数据内联为立即数，数据就在其URL自身之中；

    c. data：[<mediatype>][;base64],<data>， 一般都用于内联图片，但也可用在指定URL的地方，如script和a；

    d. 缺陷：IE不支持，数据大小有限制（firefox1.5支持到100kb），Base64编码会增加图片大小，整体下载量会增加；

    e. 内联图片适合放在外部样式表中，这样可以被缓存；

    f. php实现：.home { background-image: url(data:image/gif;base64, <?php echo base64_encode(file_get_contents("../images/home.gif"))

?>); }

 

5. 合并脚本和样式表

    理想情况下，一个页面应该使用不多于一个的脚本和样式表。

    可以先进行模块化编写脚本和样式表，而在生成过程中从一组特定的模块生成一个目标文件。要考虑不同模块的组合的数量是可管理的。