乐趣区

关于前端: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. 第一次
    1. 第二次
  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 工夫
退出移动版