虽然HTTP 1.1 中已经支持了持久连接-keep-alive
(一个TPC/IP连接中,可以连续发起多次HTTP请求)与采用“管线化”技术,能够做到同时并行发送多个HTTP请求。但优化是无止境的,所以还是有必要考虑通过有效的减少HTTP请求数量优化网站的性能。
一、合并资源
合并资源优点:
合并文件是最常见的做法。http协议是无状态的应用层协议,每次http请求都需要建立通信链路、进行数据传输,而在服务器端,每个http都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵,而合并资源的优点不止是减少http请求的数量,还可以减少请求资源的大小,减少http请求的数量和减少请求资源的大小可有效提高访问性能;
合并资源缺点:
如果合并后的文件很大,下请求后下载是花费较长的时间,反而会延长网站的渲染时间。
合并资源手段:
主要是合并CSS、合并JS与合并图片。将游览器一次访问需要获取的js与css文件合并成一个文件,游览器只要一次请求就可以获取到所需要的文件。
图片也可以合并,多张图片合并成一张,如果每张图片都有不同的超链接,可通过CSS偏移响应鼠标点击操作,构造不同的URL。将图片base64,这样也可以减少请求。
在合并工具方面,可以使用gulp与webpack等项目构造工具对js与css文件进行压缩与合并。但是仅仅是考虑到减少http请求数量而对文件采取合并是有点片面的。
二、在图像方面使用css精灵(也叫雪碧图)
CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。
雪碧图优点:
1、利用CSS Sprites能够减少浏览器向服务器的请求次数,减少http请求,从而提高页面的性能,这是图片精灵的最显著特点,也是被广泛应用的主要原因。
2、利用图片精灵还能减少图片的字节,你使用9张小的图片,一张4KB,9张就是36KB,而把他们都放一张图片上,只需要4KB到5KB就可,所以减少图片字节也是显而易见的。
3、在整理图片的过程中,不需要再纠结如此大量图片的名字问题,多张放在一张上,只需要取一个综合的名字就可以了,如此便提高了工作效率。
4、如果想改变网站风格,你只需要处理一张图片就可以了,把一张图片的颜色和风格一改,那么整个网站的风格就都变了,便于后期的维护和修改。
雪碧图缺点:
1、在应用精灵图片的时候,你需要考虑当前盒子会不会漏出其他的背景图,这个还好,比较头疼的是,页面自适应时,背景图的位置就没那么容易掌控了。
2、制作精灵图的过程比较繁琐,你需要处理好每张图之间的距离和位置,如果做得不合理,那么使用起来就比较麻烦了,甚至需要单独创建一个空的盒子来装背景图。
3、使用精灵图的页面后期维护带来了繁琐,因为他是多张图在一张图上,牵一发而动全身的感觉,你改变一张背景图,如果大小发生变化,那么其他的你就得动,只要你动了,那么所有的背景定位都将需要改变,所以一旦需要更改背景图的话,轻易不要改变其他图片的位置,原位能放下就在原位改,放不下就在下面添加。
注意:
背景图片很少的情况,没有必要使用精灵技术,维护成本太高。 如果是背景图片比较多,可以建议使用精灵技术。
三、使用inline images
通过使用data:URL模式可以在Web页面中包含图片但无需任何额外的HTTP请求。(IE不支持,这种基本没什么用处)
<img src="https://img-blog.csdnimg.cn/2022010620235298889.gif">
还有一个缺点就是大小限制。Firefox最多支持100k的内联图片.
四、利用游览器缓存
如果图片或者脚本,样式文件内容比较固定,不经常被修改,那么,尽可能利用缓存技术,减少HTTP请求次数或文件下载次数。
命中浏览器缓存分为两类:强缓存,协商缓存。
- 强缓存:不会发起HTTP请求,直接从浏览器缓存中读取文件。
- HTTP 1.0中,采用
Expires
头指定资源过期时间; - HTTP 1.1中,采用
Cache-Control: max-age
指定资源被缓存多久;
- HTTP 1.0中,采用
- 协商缓存:向服务器发起HTTP请求,如果资源文件并未更新,response响应码即为304,随后从浏览器缓存中下载该文件,并不会从服务器下载。
- HTTP 1.0中,采用
Last-Modified
(response header)和If-Modified-Since
(request header)来指定资源过期时间; - HTTP 1.1中,采用
E-Tag
(response/request header)和If-None-Match
来决定该资源是否过期;
- HTTP 1.0中,采用
如何配置浏览器缓存,大多是后台资源服务器控制的。一般将共有图片,第三方JS插件库或者CSS放到CDN上,不仅仅因为CDN的分布式特性可以加快资源文件下载速度,而且,一般CDN服务器都做了缓存配置,可以充分浏览器缓存。