为什么减少HTTP请求可以优化性能?建立和释放HTTP请求需要时间。浏览器对同一个域名的并发数有限制。建立和释放HTTP请求需要时间。HTTP请求从建立到关闭经历了以下几个步骤。这些步骤需要时间。在网络状况不佳的情况下,需要更长的时间。如果页面的资源非常碎片化,每次HTTP请求只带回几K甚至不到1K的数据(比如各种小图标),那么性能是非常浪费的。客户端连接到Web服务器并发送HTTP请求。服务器接受请求并返回HTTP响应以释放连接。TCP连接。浏览器对同一域名下的并发资源请求数有限制。资源很多,所以后面的资源请求只有在前面的资源下载完后才能开始,这就是为什么我们在chrome网络的Timing中可以看到Queuingtime(原因之一,还有其他资源优先级))附上各浏览器并发数解决方案CSSSprites技术内嵌图片&base64合并脚本和样式表CSSSprites技术传说中的Sprite图片可以将多张图片合二为一,使用background-position定位特定图片的技术,非常适用于一整套小图标的应用场景。如下图:.img{width:100px;高度:100px;背景图像:url('image.png');背景位置:-100%-200%;background-size:700%600%;}inlineImages&base64使用data:url方式在页面中包含图片,但是不需要额外的http请求,同时也有缺点:体积会增加1/3左右;不能单独缓存,只能依赖宿主(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)
