前端优化之减少HTTP请求_减少http请求,合并文件、使用css sprite等方式可以有效降低请求数量。

浏览器只有10%-20%的最终用户响应时间花在了下载HTML文档上，其余的80%~90%时间花在了下载页面中的所有组件进行的HTTP请求上。因此，改善响应时间最简单的途径就是减少HTTP请求的数量。
HTTP请求从建立到关闭的步骤：
　　1)客户端连接到Web服务器；
　　2)发送HTTP请求；
　　3)服务器接受请求并返回HTTP响应；
　　4)释放连接TCP链接。
　 这些步骤都是需要花费时间的，在网络情况差的情况下，花费的时间更长。如果页面的资源非常碎片化，每个HTTP请求只带回来几K甚至不到1K的数据（比如各种小图标）那性能是非常浪费的。
1.使用图片地图：
　　假设导航栏上有五幅图片，点击每张图片都会进入一个链接，这样五张导航的图片在加载时会产生5个HTTP请求。然而，使用一个图片地图可以提高效率，这样就只需要一个HTTP请求。
　　服务器端图片地图：将所有点击提交到同一个url，同时提交用户点击的x、y坐标，服务器端根据坐标映射响应。
　　客户端图片地图：直接将点击映射到操作。

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
     <area shape="rect" coords="180,139,14" href ="venus.html" alt="Venus" />
     <area shape="rect" coords="129,161,10" href ="mercur.html" alt="Mercury" />
     <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
     <area shape="rect" coords="140,0,110,260" href ="star.html" alt="Sun" />
</map>
1
2
3
4
5
6
7
8

2.使用CSS Sprites（css精灵）：
　　传说中的雪碧图，可以将多张图片合成一张，用background-position来定位具体图片的技术，非常适用于一整套小图标的应用场景。如下图：
　　
　　图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。使用CSS Sprites还有可能降低下载量，可能大家会认为合并后的图片会比分离图片的总和要大，因为还有可能会附加空白区域。实际上，合并后的图片会比分离的图片总和要小，因为它降低了图片自身的开销，譬如颜色表、格式信息等。

<div>
    <span id="image1" class="nav"></span>
    <span id="image2" class="nav"></span>
    <span id="image3" class="nav"></span>
    <span id="image4" class="nav"></span>
    <span id="image5" class="nav"></span>
</div>
1
2
3
4
5
6
7

.nav {
    width: 50px;
    height: 50px;
    display: inline-block;
    border: 1px solid #000;
    background-image: url('E:/1.png');
}
#image1 {
        background-position: 0 0;
}
#image2 {
        background-position: -95px 0;
}
#image3 {
        background-position: -185px 0;
}
#image4 {
        background-position: -275px 0;
}
#image5 {
        background-position: -366px -3px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

CSS Sprites（css精灵）在线转化：https://www.toptal.com/developers/css/sprite-generator。
3.使用字体图标：　　
　　在可以大量使用字体图标的地方我们可以尽可能使用字体图标，字体图标可以减少很多图片的使用，从而减少http请求，字体图标还可以通过CSS来设置颜色、大小等样式，何乐而不为。
　　
4.合并js脚本和css样式表：　　
　　一般网站都用到了很多的js代码和css代码，尤其是对于用了模块化的网站来说，文件非常多，非常碎片化，初次启动页面的时候，可能一下子就几十个请求出去了，导致首屏时间特别的慢。合并文件的效率要比不合并高1/3。所以，对于资源特别碎片的网站，建议合并一些通用的代码，减少http请求。
　　
5.内联图片（base64）：　　
　　内联图片：把图片文件编码成base64，优点是可以减少http的请求，缺点是不能跨域缓存。可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。只会在一些质量较小的图标类图片上面使用，否则得不偿失。
　　base64在线转化：http://imgbase64.duoshitong.com/。