复习前端:浏览器缓存策略

复习前端:浏览器缓存策略

2023年春节假期开始了,在假期准备整理一些前端相关的支持,巩固自己的技能,为新的一年做准备。本文准备巩固关于浏览器缓存策略的。

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%作为缓存时间。