前端工程师应该掌握的HTTP缓存知识点

为何要使用 HTTP 缓存

• 对于资源:

假如每次请求的请求头和响应头分别都是1k，请求文件大小是10k。那么一次请求就是12k大小，n次就是(12 * n)k。

• 对于前端:

前端每次请求完毕都要从新渲染 影响用户体验

• 对于后端:

没有缓存机制的话前端会频繁的请求后端的接口。后端每次都要提供查找和下载等功能。若是请求基数比较大，服务器就会存在较大的压力。
为了减小网络带宽消耗、减小延迟与网络阻塞，同时下降服务器压力，提升服务器性能。

HTTP 缓存的内容是什么

• CSS JS 图片等 更新频率不大的静态文件等

HTTP 缓存头部字段

• Cache-Control

存在于请求头和响应头中，是缓存控制字段
控制HTTP缓存的最高指令，缓存不缓存 它说了算

• 相关value

no-store: 不缓存
no-cache: 缓存 可是前端使用缓存前 都会请求服务器 来判断当前的缓存资源是不是最新 只是用不过时的缓存
max-age=x(单位秒):请求缓存后的x秒内 再也不发起请求， HTTP1.1以上
s-maxage=x(单位秒):代理服务器请求源站后x秒内再也不发起请求，只对 CDN有效
public:客户端和代理服务器(CDN)均可以缓存
private:只有客户端能够缓存

Expires

• 响应头 表明资源过时时间，由服务器返回提供。可是浏览器端能够修改Expires。它是HTTP1.0的属性，在与max-age共存的状况下，max-age的优先级较高(由于max-age是HTTP1.1的属性)
• 场景:

1. 浏览器向服务器请求了一个a.js。
2. 服务器说:‘你烦不烦？ 咱们约定个时间Expires，时间还没到就别来烦我了’。
3. 而后服务器就返回了a.js和过时时间Expires。
4. 后续浏览器的请求 会先比对当前时间是否以及大于了Expires过去时间。若是还没过时 就不会发起请求 使用缓存，若是过时了 就会从新发起请求。

• 缺点:

可能时间过时了，可是从新发起请求后 发现当前资源 a.js并无发现变化。这样就形成了 请求的浪费

• 进阶:

使用 Last-Modified和 If-Modified-Since
使服务器和浏览器之间在 Expires的基础上，增长一个 群文件最新修改时间来辅助判断是否应该使用缓存

Last-Modified / if-Modified-Since

• Last-Modified：响应头 资源最新修改时间 由服务器告诉浏览器
• if-Modified-Since：请求头 资源最新修改时间 由浏览器告诉服务器。和Last-Modified是成对出现的，它们两个会共同对比来决定这个文件要不要从新发送
• 场景:

1. 浏览器向服务器请求了一个a.js。
2. 服务器说：’你烦不烦？ 咱们约定个时间Expires，另外再给你一个文件最新修改时间Last-Modified，到时候时间到期了，咱们就比对文件最新修改时间，对得上你就继续使用缓存‘。
3. 而后服务器就返回了a.js和过时时间Expires和文件最新修改时间Last-Modified。
4. 后续浏览器请求会先对比是否超过了Expires过时时间。没过时就不发起请求，仅使用缓存。若是过时了 浏览器在后续请求服务器时就会带上文件最新修改时间If-Modified-Since。
5. 服务器收到该请求后 会将Last-Modified 和 if-Modified-Since进行比对。
6. 若是Last-Modified 和 if-Modified-Since不同，服务器就会去查找最新的a.js，同时会再次返回最新的a.js和Expires和Last-Modified。
7. 若是Last-Modified 和 if-Modified-Since同样。服务器就会返回304 - Not-Modified，表示以前的缓存还能够继续使用。

• 缺点:

Expires不太稳定，浏览器端能够随意的修改 Expires。
Last-Modified只能精确到秒。在极端状况下，假设文件在1s内发生了变更，那么此时 Last-Modified 就没法感知到该文件的变化，这样浏览器永远都拿不到最新的文件资源。

• 进阶:

让服务器和浏览器在过时时间 Expiress + 最新修改时间 Last-Modified 的基础上，增长一个文件内容惟一对比标记 Etag和 if-None-Match。而 Expires不太稳定 再加入一个 max-age来加以代替。

Etag / if-None-Match

• Etag：响应头，资源标识，由服务器告诉浏览器
• if-None-Match：请求头，资源缓存标识，由浏览器告诉服务器，其实就是上次服务器给浏览器的 Etag。和 Etag 是一对的，它们会进行对比（用法比 if-Modified-Since 更高级一些）
• 场景:

1. 浏览器向服务器发起了a.js的请求
2. 服务器说:'你烦不烦？ 咱们约定个时间Expires，再给你一个max-age=60(秒)，Last-Modified也给你，另外再给你一个文件内容惟一标识符Etag'。
3. 而后服务器就返回了a.js和过时时间Expires和max-age=60,和文件最新修改时间Last-Modified和文件内容惟一标识符Etag。
4. 后续浏览器在max-age=60秒内，就不会再次发起新的请求而是直接使用缓存。而且此时由于有了max-age的存在，Expires已经没用了。
5. 后续浏览器请求在max-age=60秒后，会携带上If-Modified-Since(服务器发送的Last-Modified) 和 if-None-Match(服务器发送的Etag)。
6. 服务端会比对if-None-Match和Etag，尽管此时也传递了If-Modified-Since，可是服务端不会再对比if-Modified-Since和Last-Modified。由于Etag的优先级大于Last-Modified。Etag更精准的解决了文件资源在1s内的变更问题。

7.服务端比对后发现，if-None-Match 和 Etag不想等。说明a.js被修改过，服务器就会返回最新的a.js和全新的Etag和max-age，也会同时返回Expires和Last-modified，虽然它俩已经没什么做用了。

1. 服务端经对比发现，if-None-Match与Etag相等。说明a.js没有任何变化，返回状态码304告诉浏览器 继续使用以前的本地缓存

• 缺点:

在 Expires和 max-age都没有过时的状况下，浏览器是没有办法主动知道文件资源是否变更。由于在时间未到的状况下，浏览器确定使用本地的缓存资源。

• 进阶:

这种问题在HTTP协议自己上来说，就很难解决了

• 1. 经过 md5 / hash 缓存

经过不缓存 html，为静态文件添加 md5 或者 hash 标识，来解决浏览器没法跳过缓存过时时间内主动感知文件变化的问题。
只需在项目每次发布迭代的时候，给静态文件添加不一样的 md5/hash 标识便可。由于文件名并不同，服务端会认为是新的文件，全部跟各类缓存字段都没有任何关系，也就不会存在缓存问题。

• 1. 经过 CDN 缓存

CDN 是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，经过中心平台的负载均衡，内容分发，调度等功能模块，使用户就近获取所需内容，下降网络阻塞，提升用户访问响应速度和命中率，有一个字段是专门给 CDN 来使用的 s-maxage=x(单位秒)

CDN 缓存的工做方式

• 第一次请求

1. 浏览器向服务器请求a.js资源。
2. 服务端:'a.js这个文件我给我小弟 CDN 了，之后你要这个就找 CDN 吧，别找我了。
3. 成功返回a.js给 CDN，CDN 进行缓存。同时 CDN 返回给浏览器，浏览器本身也进行了缓存'。

• 后续请求

1. 浏览器缓存时间过时，再次发起请求时。这时候 服务器就不会理你了。此时CDN会帮你查找该资源，同时也分几种状况：

1-1. CDN节点本身缓存的文件尚未过时，CDN会打回该请求。返回状态吗304，告诉浏览器 以前的缓存资源还能使用。
1-2. CDN节点本身缓存的文件已通过期了。为了保险起见，CDN本身会发生请求到源服务器，成功拿回最新数据后，再返回给浏览器。