前端性能优化(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）