🍰按失效策略分类

强缓存

当客户端请求时，先访问缓存数据库看缓存是否存在，存在直接返回，不存在，请求真实服务器，响应后加入到缓存数据库。

强缓存，直接减少了请求数，是提升最大的缓存策略。。 它的优化覆盖率请求数据的三个步骤。如果考虑缓存来优化页面性能，则强缓存应该被首选。

实现方式有两种：Expires、Cache-contrl

Expires

这个是HTTP1.0字段，表示缓存到期时间，是绝对时间（当前时间+缓存时间），在响应消息头设置后，在未过期之前步需要再次请求。但是弊端很大：

Expires: Thu, 10 Nov 2017 08:45:11 GMT

• 修改本地时间、时差等都会造成客户端与服务端时间不一致
• 写法复杂

Cache-contrl

表示缓存的最大有效时间，该时间为相对时间。

Cache-control: max-age=2592000

• max-age：即最大有效时间
• must-revalidate：如果超过了 max-age 的时间，浏览器必须向服务器发送请求，验证资源是否还有效。
• no-cache：虽然字面意思是“不要缓存”，但实际上还是要求客户端缓存内容的，只是是否使用这个内容由后续的对比来决定。
• no-store: 真正意义上的“不要缓存”。所有内容都不走缓存，包括强制和对比。
• public：所有的内容都可以被缓存 (包括客户端和代理服务器， 如 CDN)
• private：所有的内容只有客户端才可以缓存，代理服务器不能缓存。默认值。

max-age到期应该重新验证，no-cache是必须验证，（max-age，must-revalidate等价于no-cache），Cache-control优先级高于Expires。

对比缓存

对比缓存也叫做协商缓存，当强制缓存失效（超过规定时间），就会使用对比缓存，由服务器决定缓存内荣是否失效。

浏览器先请求缓存数据库，返回一个缓存标识。之后浏览器拿这个标识和服务器通讯。如果缓存未失效，则返回 HTTP 状态码 304 表示继续使用，于是客户端继续使用缓存；如果失效，则返回新的数据和缓存规则，浏览器响应数据后，再把规则写入到缓存数据库

对比缓存在请求数和没有缓存是一致的，但是返回304，返回的仅仅是状态码，没有实际的文件内容，因此  节省了响应体体积，缩短网络传输时间。。 和强制缓存来说提升幅度较小。对比缓存有两种方式：

Last-Modified & If-Modified-Since

1.服务器用Last-Modified字段告知客户端资源最后一次被修改的时间

Last-Modified: Mon, 10 Nov 2018 09:10:11 GMT

  2.浏览器储存这个值和内容

  3.下一次请求相同资源时时，浏览器从自己的缓存中找出“不确定是否过期的”缓存。因此在请求头中将上次的 Last-Modified 的值写入到请求头的 If-Modified-Since 字段。

   4.服务器会将 If-Modified-Since 的值与 Last-Modified 字段进行对比。如果相等，则表示未修改，响应 304；反之，则表示修改了，响应 200 状态码，并返回数据。

缺陷：

• 资源更新速度以秒以下单位则会失效，因为它的时间单位最低为秒
• 文件是服务器动态生成的，那么方法的更新时间永远都是生成时间，尽管文件未变化

Etag & If-None-Match

Etag & If-None-Match解决了上述问题。Etag 存储的是文件的特殊标识(一般都是 hash 生成的)，服务器存储着文件的 Etag 字段。之后的流程和 Last-Modified 一致，只是 Last-Modified 字段和它所表示的更新时间改变成了 Etag 字段和它所表示的文件 hash，把 If-Modified-Since 变成了 If-None-Match。服务器同样进行比较，命中返回 304, 不命中返回新资源和 200。

• Etag 的优先级高于 Last-Modified

🍔总结

• 调用 Service Worker 的 fetch 事件响应
• 查看 memory cache
• 查看 disk cache。这里又细分：

        如果有强制缓存且未失效，则使用强制缓存，不请求服务器。这时的状态码全部是 200

        如果有强制缓存但已失效，使用对比缓存，比较后确定 304 还是 200

• 发送网络请求，等待网络响应
• 把响应内容存入 disk cache (如果 HTTP 头信息配置可以存的话)
• 把响应内容 的引用 存入 memory cache (无视 HTTP 头信息的配置)
• 把响应内容存入 Service Worker 的 Cache Storage (如果 Service Worker 的脚本调用了 cache.put())

本文参考：一文读懂前端缓存