http强缓存和协商缓存的介绍和应用案例，简洁明了

http缓存方式简介

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

缓存机制

1. 优先级
   1. 强缓存：cache-control -> expires
   2. 协商缓存：Etag > Last-Modified
2. 参数介绍
   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地址：developer.mozilla.org/en-US/docs/…

案例

强缓存

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')

1. 设置了强缓存之后请求：
2. 到期后就不会走强缓存

3.Etag和If-None-Match

1. 默认情况下，浏览器会设置If-None-Match为上一次返回的Etag
2. 如果If-None-Match和Etag相同，则走协商缓存
   1. 第一次
   2. 第二次
3. 否则，不走协商缓存
   1. 第一次
   2. 第二次

4. Last-Modified和If-Modified-Since

1. 后端配置
 ~~~js
// 后端设置Last-modified
res.setHeader('last-modified', new Date('2023-5-16 12:00:00').toUTCString())
~~~
2. 第一次请求![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/389568843e6d465a9d13cd4c68806ee2~tplv-k3u1fbpfcp-zoom-1.image)
3. 第二次请求时，浏览器的If-Modified-Since会自动携带上上一次请求的：Last-Modified时间