前端性能优化(1)--减少HTTP请求

为什么减少HTTP请求能够优化性能？

1. HTTP请求建立和释放需要时间
2. 浏览器对同一个域名的并发数量有限制

HTTP请求建立和释放需要时间
HTTP请求从建立到关闭一共经过以下步骤，这些步骤都是需要花费时间的，在网络情况差的情况下，花费的时间更长。如果页面的资源非常碎片化，每个HTTP请求只带回来几K甚至不到1K的数据（比如各种小图标）那性能是非常浪费的。

1. 客户端连接到Web服务器
2. 发送HTTP请求
3. 服务器接受请求并返回HTTP响应
4. 释放连接TCP链接

浏览器对同一个域名的并发数量有限制
浏览器对同一个域名下的资源请求是有限制的，如果页面的并发资源非常多，那后续的资源请求只能等到前面的资源下载完后才开始，这也是为什么我们能在chrome network 的Timing看到Queueing时间（原因之一，另外还有资源优先级什么的）

另附上各浏览器的并发数量

解决方案

1. CSS Sprites技术
2. 内联图片 & base64
3. 合并脚本和样式表

CSS Sprites技术
传说中的雪碧图，可以将多张图片合成一张，用background-position来定位具体图片的技术，非常适用于一整套小图标的应用场景。如下图：

.img{
    width: 100px;
    height: 100px;
    background-image:url('image.png');
    background-position: -100% -200%;
    background-size: 700% 600%;
}

内联图片 & base64
使用data:url的模式可以在页面中包含图片，但不需要额外的http请求，缺点也有：

1. 体积会大约增加1/3；
   
2. 不能单独缓存，只能依赖于宿主（html/css文件）的缓存方式。

例子(一个红色箭头，可拷贝data:image/png...到浏览器中查看)

background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAATCAMAAACwcE1OAAAAaVBMVEUAAADxN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN02cyeRvAAAAInRSTlMAB/z33dRlJPDq48q7lnJMQDItHBUQAwHxxqukhHpbVVM33r4k4AAAAH5JREFUKM99zkcWgkAQRdGiA0kEQcCc/v4XKaePEvQXd/omT5bKWFZUxu702hyBLNFqm2PgO16jDYKiZ/VwwceW5RtGZP+Jifnbry1m0p/9fY4F17HpSRHNps8Ykf0riPJb72BMJcHLgkqbMJ1B4dph2kN16iXGiofUDiqfvAHr4Sb7hIVYtAAAAABJRU5ErkJggg==')

合并脚本和样式表
一般网站都用到了很多的js代码和css代码，尤其是对于用了模块化的网站来说，文件非常多，非常碎片化，初次启动页面的时候，可能一下子就几十个请求出去了，导致首屏时间特别的慢。有关资料现实（如下网址），合并文件的效率要比不合并高1/3。所以，对于资源特别碎片的网站，建议合并一些通用的代码，减少http请求。
下面是两个地址

（来源于O'RILLY《高性能网站建设指南》）

没有合并资源：http://stevesouders.com/examp...（本人测试的1213ms）

合并资源的：http://stevesouders.com/examp... （本人测试909ms）