前端性能优化之减少Http请求

前言

一个页面的打开速度是其性能最直观的体现，那么影响其打开速度的因素有什么呢？此处不再展开。本文主要聊聊关于减少http请求以达到节省时间的目的

问：减少http请求为什么能节省时间？

页面资源的请求，80%的时间耗费在http请求上，由于TCP请求是基于连接的请求，其连接与释放需要一定的时间。

从浏览器方面来讲，对同一域名下的资源请求并发数量是有限制的，过多的请求数导致耗时严重。

那么怎么解决该问题呢？

1. css sprites
2. 内联图片 &base64
3. 资源打包（js,css等静态资源）
4. 图片地图
5. 配置多个域名和CDN加速

1、css雪碧图

通过使用合并图片，通过制定css的Backgroud-image和background-position来显示元素。

2、内联图片 &base64

使用data:url的模式可以在页面中包含图片，但不需要额外的http请求，缺点也有：体积会大约增加1/3；不能单独缓存，只能依赖于宿主（html/css文件）的缓存方式。

3、资源打包（js,css等静态资源）

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

4.、图片地图

其允许你在一个图片上关联多个URL。目标URL的选择取决于用户单击了图片上的那个位置。 我们可以通过使用多个分开的图片，然后每个图片都对应一个超链接，当然这也会产生很多HTTP请求，我们目标是减少HTTP请求。

将多个图片合并成一个图片，然后以位置信息定位超链接，把HTTP信息减少成为一个,可以保证设计的完整性和功能的齐全性
 

5、配置多个域名和CDN加速

通常浏览器对于一个域名的并发请求是有限的，因此配置多个域名能够最大限度的增加并发请求量，

但这里有个缺点就是会增加浏览器域名解析的次数，建议利用CDN来加载不是经常更新和修改的静态资源（图片，css库，js第三方库等等）。一个是CDN域名一般都会缓存到本地中，另一个是CDN网络请求速度是非常快的。

由于CDN部署在网络运营商的机房，这些运营商又是终端用户的网络服务提供商，因此用户请求路由的第一跳就到达了CDN服务器，当CDN中存在浏览器请求的资源时，从CDN直接返回给浏览器，最短路径返回响应，加快用户访问速度，减少数据中心负载压力。

 

参考部分博客

https://blog.csdn.net/jhkj_5154/article/details/79336297

https://segmentfault.com/a/1190000015990848

https://www.cnblogs.com/zhutao/p/6638375.html