1.引入浏览器缓存位置和优先级
- Service Worker
- 内存缓存
- 磁盘缓存
- 推送缓存
- 如果上面的缓存没有命中，则会发起网络请求
2.不同缓存的差异
2.1 Service Worker
有点类似于 Web Worker，是一个独立的线程，可以在这个线程中缓存文件，当主线程需要的时候从这里读取文件。Service Worker 允许自由选择缓存哪些文件以及文件的匹配和读取规则。并且缓存是持久的。
2.2 内存缓存
即内存缓存，内存缓存不是持久化的，缓存会随着进程的释放而释放。
2.3 磁盘缓存
即硬盘缓存，与内存缓存相比，硬盘缓存具有更好的持久性和容量，会根据HTTP头的字段判断需要缓存哪些资源。
2.4 推送缓存
即 push cache，这是 HTTP/2 的内容，目前用的比较少。
3.浏览器缓存策略
3.1 强缓存（不需要向服务器索要缓存）
设置 expires
就是过期时间，例如，expires: Tue, 18 Apr 2023 06:29:41 GMT 表示缓存将在这个时间后过期。这个到期日期是一个绝对日期。如果修改了本地日期，或者本地日期与服务器日期不一致，那么缓存过期时间就会出错。
设置 Cache-Control
HTTP/1.1增加了一个新的字段，cache-control 可以通过 max-age 字段设置过期时间，cache-control: max-age=7776000 另外 cache-control 还可以设置private/no-cache 等字段。
3.2 协商缓存（需要询问服务器缓存是否过期）
last-modified
即最后修改时间，当浏览器第一次请求该资源时，服务器会在响应头中添加 last-modified。当浏览器再次请求该资源时，浏览器会在请求头中带上 if-modified-since 字段，该字段的值为上一个服务器返回的最后修改时间，服务器比较两次，如果相同则返回 304，否则返回新的资源并更新 last-modified。
ETag
HTTP/1.1 中的一个新字段表示文件的唯一标识符，只要文件内容发生变化，就会重新计算ETag。缓存过程与 last-modified 相同：服务器发送 ETag 字段 -> 浏览器再次请求时发送 If-None-Match -> 如果ETag值不匹配，则文件已更改，返回新的资源并更新ETag，匹配则返回304。
last-modified 和 ETag 的比较
ETag 比 last-modified 更准确：如果打开没有修改的文件，last-modified 也会改变，last-modified 的单位时间是秒。如果文件在一秒钟内被修改，它仍然会命中缓存。
如果没有设置缓存策略，浏览器会将响应头中的Date减去 last-modified 值的10%作为缓存时间。
