HTTP 缓存

img

缓存位置

1. Service Worker

Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。

当 Service Worker 没有命中缓存的时候，我们需要去调用 fetch 函数获取数据。也就是说，如果我们没有在 Service Worker 命中缓存的话，会根据缓存查找优先级去查找数据。但是不管我们是从 Memory Cache 中还是从网络请求中获取的数据，浏览器都会显示我们是从 Service Worker 中获取的内容。

2. Memory Cache

内存中的缓存，包含当前页面中抓取到的资源（如 JS、CSS、图片），读取高效。

存活时间短，Tab 关闭时释放。（Memory Cache 存在于当前渲染进程，且会在硬盘上保存一份 Disk Cache）。

当第一次访问页面时，不管资源是从网络中来还是 Disk Cache 来，都会记录在 Memory Cache；在当前 tab 二次或多次访问，会显示为 Memory Cache。

针对资源的 URL、Content-Type、CORS 等特征校验资源文件的缓存。

3. Disk Cache

硬盘中的缓存，读取慢，但存储的容量大、时效性长。

4. Push Cache

来自 HTTP2，最后的命中位置，只在 session 中存在，会话结束就释放，且存活时间短，在 chrome 中存活 5 分钟。

强缓存

直接读取本地缓存，不向服务器发送请求。

通过 HTTP 响应头中 Expires 和 Cache-Control 字段控制。

Expires （http 1）

指定缓存的失效时间（Date 类型，toString）。

缺点 ：会受本地时间影响，本地修改系统时间，缓存将不可控。

Cache-Control （http 1.1）

指定缓存接下来多久失效，如 Cache-Control: max-age=3600， 单位秒，表示 1 小时过期。

Cache-Control 其他值：

img

no-cache 只是表示不会使用本地缓存，但会发送请求给服务器进行协商缓存。

对 html 文件应该使用 no-store，表示不使用强缓存也不使用协商缓存。

Cache-Control 优先级高于 Expires 。

协商缓存

强缓存失效后，浏览器会携带缓存标记向服务器发起请求，通过缓存标记来判断浏览器的本地缓存是否过期。

命中协商缓存时，HTTP 状态码返回 304 。

通过 HTTP 头中的 Last-Modified 和 Etag 控制。

Last-Modified （http 1）

记录资源在服务器上最后一次的修改时间，在 HTTP 响应头中返回。

浏览器发起请求时，在 HTTP 请求头中携带 If-Modified-Since （为 Last-Modified 的值），服务器用于判断资源是否过期。

缺点

1. 只能记录到秒，如果一个资源在 1 秒内修改多次，无法识别

2. 资源被修改，但内容没有变化（多次修改，最后变回第一次的内容），也会判断浏览器缓存失效

Etag （http 1.1）

记录资源问卷的唯一标识（根据资源内容生成），当内容变更时，Etag 重新生成；在 HTTP 响应头中返回。

浏览器发起请求时，在 HTTP 请求头中携带 If-None-Match （为 Etag 的值），服务器用于判断资源是否过期。

Last-Modified 和 Etag 比较

1. 准确性上，Etag 优于 Last-Modified。

2. 性能上，Last-Modified 优于 Etag。（Etag 需要计算）

3. 优先级上，服务器优先考虑 Etag。

用户行为对浏览器缓存的影响

1. 打开网页，使用 Disk Cache，没有则发送请求

2. 按 F5，使用 Memory Cache，其次使用 Disk Cache，没有则发送请求

3. 按 Ctrl + F5，不使用缓存，直接请求服务器，请求头中 Cache-Control: no-cache，Pragma: no-cache，服务器直接返回 200 和最新的内容

参考资料

1. https://www.jianshu.com/p/54cc04190252