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

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

http缓存方式简介

1. 强缓存：强缓存使用Expires（老版本）和cache-control（新版本）来控制

2. 协商缓存：协商缓存使用if-Modified-Since 与 Last-Modified配对、If-None-Match与Etag配对来控制

   缓存机制

3. 优先级

   1. 强缓存：cache-control -> expires
   2. 协商缓存：Etag > Last-Modified

4. 参数介绍

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

5. 设置了强缓存之后请求：

6. 到期后就不会走强缓存

   3.Etag和If-None-Match

7. 默认情况下，浏览器会设置If-None-Match为上一次返回的Etag

8. 如果If-None-Match和Etag相同，则走协商缓存

   1. 第一次

   

   2. 第二次

9. 否则，不走协商缓存

   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时间