HTTP 请求优化

前端性能

一、概述

HTTP 请求优化，主要是减少 HTTP 请求次数和减少请求的体积。

为什么要减少 HTTP 请求次数？
请求次数越多，消耗在请求过程中无意义的时间越多，比如 TCP 连接建立的时间（HTTP/2 有效缓解这一问题）、服务器读取文件的时间、服务器排队处理请求的时间等。

为什么要减少请求的体积？
显然，请求的文件体积越大，网络传输的时间越长，加载一个文件需要的时间就越长；而如果该文件包含渲染页面的关键内容，则在该文件加载之前，页面会无法使用。

所以，减少 HTTP 的请求次数和减少 HTTP 请求体积二者需要达到一个平衡点，不能太极端。

二、减少单次请求所花费的时间

减少文件的体积是减少单次请求所花费时间的主要手段。

减少文件的体积主要的手段是：压缩、拆分资源

1. 压缩
1）构建阶段的压缩主要是减少文件的字符数量

• 删除多余空格和空行
• 变量替换，用字符较少的变量名替换字符较多的变量名

2）HTTP 压缩（也可以称为内容编码）
HTTP 压缩就是以缩小体积为目的，对 HTTP 内容进行重新编码的过程。
例如 Gzip，能有效减小文件的体积。

Gzip 压缩背后的原理，是在一个文本文件中找出一些重复出现的字符串、临时替换它们，从而使整个文件变小。

2. 拆分资源
1）删除冗余代码
例如 webpack 的 tree shaking，利用的是 ES6 静态模块的特点（编译时就能确定模块的依赖关系，以及输入和输出的变量），进行模块级别的冗余删除

UglifyJsPlugin 插件能删除碎片化的代码（console 语句，注释等）

2）按需加载
将文件按路径（可以采用更小粒度）进行拆分，优先加载关键渲染路径依赖的文件，其他文件在需要的时候再异步请求。

三、减少请求次数

主要手段当然是资源的合并。

JS/CSS
构建阶段，可以通过构建工具，将 JS 和 CSS 文件打包成一到两个文件。

图片
图片格式多种多样，按照业务场景选择合适的图片格式：jpg/png/webp/svg

1）雪碧图及 base64 化
都是减少 HTTP 请求，但都有相应的缺点：

雪碧图牵一发而动全身，一个图片修改了，则整个图片都要重新生成，不利于缓存。

base64 则增大了文件体积（变为原来的 4/3，且增大了 CSS 的体积，阻碍页面的渲染）

后端接口请求
需根据业务场景，确定接口是否需要合并。

四、缓存

缓存可以减少网络 IO 消耗，提高访问速度。

1. 浏览器缓存
浏览器缓存机制有四个方面，它们按照获取资源时请求的优先级依次排列如下：

• Memory Cache / Disk Cache
• Service Worker Cache
• HTTP Cache
• Push Cache（HTTP2 的新特性）

1）Memory Cache 和 Disk Cache 的区别：

Memory Cache最大的区别在于，当退出进程时，内存中的数据会被清空，而磁盘的数据不会，所以，当下次再进入该进程时，该进程仍可以从 Disk Cache 中获得数据，而 Memory Cache 则不行。

但是，从 Memory Cache 中读取数据更快，不需要耗费时间。

所以，浏览器第一次打开页面的时候，会从 Disk Cache 中读取数据，然后会保存在 Memory Cache 中，再次刷新页面会直接从 Memory Cache 中读取数据，这样速度更快。

2）Service Worker Cache
借助 Service worker 实现的离线缓存就称为 Service Worker Cache。

3）Push Cache
Push Cache 是一种存在于会话阶段的缓存，当 session 终止时，缓存也随之释放

2. HTTP 缓存机制
HTTP 缓存又分为强缓存和协商缓存。优先级较高的是强缓存，在命中强缓存失败的情况下，才会走协商缓存。

1）强缓存
HTTP expires 头部和 cache-control 头部

2）协商缓存
协商缓存：浏览器与服务器合作之下的缓存策略。

Etag 在感知文件变化上比 Last-Modified 更加准确，优先级也更高。当 Etag 和 Last-Modified 同时存在时，以 Etag 为准。

缓存配置策略：

3. 本地存储
本地存储的方式：

• cookie（HTTP 无状态，cookie 用于保持状态）
• web storage
• indexDB

4. CDN
CDN （Content Delivery Network，即内容分发网络）指的是一组分布在各个地区的服务器。

CDN 的核心点有两个，一个是缓存，一个是回源。

CDN 往往被用来存放静态资源（所谓“静态资源”，就是像 JS、CSS、图片等不需要业务服务器进行计算即得的资源。）。