浏览器缓存

一、强缓存

1. Expires

Expires 即过期时间，在 HTTP/1.0 时期使用。存在于服务器返回的响应头中，告诉浏览器在这个过期时间之前可以直接从缓存里获取数据。

Expires: Wed Jul 14 2021 08:00:00 GMT

表示资源在 2021 年 7 月 14 号 8 点 过期，过期了就得向服务端发送请求。

缺陷：服务器的时间与浏览器的时间可能不一致。

2. cache-control

1). max-age

这个字段也是存在于响应头中，它是采用过期时长来控制缓存的，对应的字段为 max-age

Cache-Control:max-age=3600

表示这个响应返回后在 3600 秒内，是可以使用的。

2). public：表示客户端和代理服务器都可以缓存
3). private：表示只有客户端可以缓存
4). no-cache: 跳过当前的强缓存，直接进入协商缓存，即每次使用缓存需要询问服务器。
5). no-store: 不进行任何形式的缓存
6). s-maxage: s-maxage 是针对代理服务器的。

当 expires和 cache-control 同时存在的时候，优先使用cache-control。

二、协商缓存

强缓存失效之后，浏览器会在请求头中携带相应的 缓存 tag 来向服务器发请求，服务器根据这个 tag来决定是否使用这个缓存。这就是协商缓存。

1. Last-Modified

即最后修改时间。浏览器第一次向服务器请求该资源，服务器会在响应头中加上这个字段。

浏览器接收到后，如果再次请求，就会在请求头上带上 If-Modified-Since 字段，这个字段的值也就是服务器传来的 Last-Modified 的值。

服务器接收到之后，将请求头中 If-Modified-Since 的值与资源最后的修改时间做比较，如果不一致，就返回新资源。否则，返回 304，告诉浏览器直接用缓存。

2. ETag

ETag 是服务器根据当前文件的内容，给文件生成唯一标识，只要里面的内容有改动，这个值就会变。

服务器通过响应头将这个值传给浏览器。

浏览器接收到这个值，会在下次请求的时候，在请求头上带上，作为 If-None-Match 的值。

服务器收到后，会和将If-None-Match 和该资源的 ETag 进行比对，若不一致，则返回新资源；否则，返回 304。

两者对比：

1. 在精度上，ETag 优于 Last-Modified。ETag 是按照内容给资源上标识，而 Last-Modified 在下列情况下并不能准确感知资源的变化：
   • 编辑了文件，但是文件内容并没有改变。这样也会造成缓存失效。
   • Last-Modified 感知的时间单位是秒，Last-Modified 不能识别文件在一秒之内的多次修改。
2. 在性能上，Last-Modified 优于 ETag。Last-Modified 只是记录一个时间点，而 ETag 需要根据文件内容生成哈希值。

三、缓存位置

当强缓存命中或协商缓存返回 304 的时候，我们直接从缓存中获取资源。那么资源究竟缓存在哪里呢？

浏览器的缓存位置一共有四种，按优先级从高到低分别是：

1. Service Worker
2. Memory Cache
3. Disk Cache
4. Push Cache