关于前端:http强缓存和协商缓存的介绍和应用案例简洁明了

2次阅读

共计 1025 个字符，预计需要花费 3 分钟才能阅读完成。

强缓存：强缓存应用 Expires（老版本）和 cache-control（新版本）来管制
协商缓存：协商缓存应用 if-Modified-Since 与 Last-Modified 配对、If-None-Match 与 Etag 配对来管制

缓存机制
优先级
1. 强缓存：cache-control -> expires
2. 协商缓存：Etag > Last-Modified
参数介绍
1. Expires：服务器设置资源过期工夫，在 http/1.1 中有效
2. Last-Modified：资源最新批改工夫
3. Etag：惟一标识，Etag 优先级高于 Last-Modified
4. Cache-Control
  1. private // 私人的,
  2. no-store,
  3. no-cache,
  4. max-age=0 // 过期工夫, 单位秒
  5. must-revalidate,
  6. proxy-revalidate
  7. Cache-Control 的 mdn 地址：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
案例

强缓存

1. Expires 老版本的形式：
```
// 在响应头中设置
// toUTCString 依据世界时 (UTC) 把 Date 对象转换为字符串：Mon, 15 May 2023 01:04:13 GMT
res.setHeader('Expires', new Date('2023-5-15 12:00:00').toUTCString())
```
2. cache-control 新版本的形式：
```
// 设置响应头
res.setHeader('Cache-Control', 'max-age=30')
```
设置了强缓存之后申请：
到期后就不会走强缓存

3.Etag 和 If-None-Match
默认状况下，浏览器会设置 If-None-Match 为上一次返回的 Etag
如果 If-None-Match 和 Etag 雷同，则走协商缓存
1. 第一次
1. 第二次
否则，不走协商缓存
1. 第一次
2. 第二次
4. Last-Modified 和 If-Modified-Since
1. 后端配置
```
 // 后端设置 Last-modified
 res.setHeader('last-modified', new Date('2023-5-16 12:00:00').toUTCString())
```
2. 第一次申请
3. 第二次申请时，浏览器的 If-Modified-Since 会主动携带上上一次申请的：Last-Modified 工夫