《高性能网站建设指南-前端工程师技能精髓》-读书笔记1（减少 HTTP 请求 ）

一、 减少 HTTP 请求

1、  图片地图

如果用图片做导航链接，那么用一张图片处理多个请求比用多个图片每个图片处理一个请求的响应速度快。

因为一个图片只有一次 HTTP 请求，而多个图片需要有多次请求。

图片地图方式处理例子：

<!-- 注意 img usemap的内容要和 map name一致 -->

<img usemap=”#map1” src=”/路径/图片”>

<map name=”map1”>

<area shape=”rect” cords=”0,0,31,31” href=”链接文件名” title=”标题名”>

<area shape=”rect” cords=”0,0,31,31” href=” 链接文件名 ” title=” 标题名 ”>

</map>

书中的示例：

http://stevesouders.com/hpws/imagemap-no.php

http://stevesouders.com/hpws/imagemap.php

2、  CSS Sprites

原理同上，但比上面的更灵活

CSS Sprites 方式处理例子：

<style>

#navbar span{

Width:31px;

Height:31px;

Display:inline;

Float:left;

Background-image:url( /路径/图片 );

}

.home{background-position:0 0;margin-right:4px;margin-lift:4px;}

.gifts{background-position:-32px 0;margin-right:4px;}

</style>

<div id=”navbar”>

<a href=”javascript:alert(‘显示内容’)” title=” 标题名 ”><span class=”home”></span></a>

<a href=”javascript:alert(‘ 显示内容 ’)” title=” 标题名 ”><span class=”gifts”></span></a>

</div>

书中的 示例：

http://stevesouders.com/examples/sprites.php

 

注：以上方法不适用于第一次访问。