关于HTTP的三种缓存头与缓存策略

华洛

于 2021-09-12 14:33:12 发布

阅读量539

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Flutter 文章标签： http 缓存 javascript

本文链接：https://blog.csdn.net/sdta25196/article/details/120250340

Flutter 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了HTTP1.0和HTTP1.1中的缓存策略，包括Expires、max-age、last-modified和Etag等机制。通过设置这些头部信息，可以实现强制缓存和协商缓存，优化前端性能并减少服务器负载。当客户端与服务器时间不一致时，Expires可能存在bug，而max-age单位为秒，能覆盖Expires。last-modified和Etag用于协商缓存，通过比较文件修改时间和内容哈希来决定是否更新资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http1.0 使用强制缓存

expires 强制缓存，单位是毫秒，如果客户端跟服务端时间不一致的情况下，会出现bug，前台无法感知

    // http 1.0 强制缓存方案，单位毫秒，如果客户端与服务端时间不一致就会出BUG
    res.setHeader("Expires", new Date(Date.now() + 10 * 1000).toUTCString())

http1.1 使用强制缓存与协商缓存

max-age 强制缓存，单位秒，会覆盖expires, 与协商缓存间使用更大的一个，前台可感知

  // http 1.1 强制缓存方案，与协商缓存 谁大听谁的，会覆盖Expires,单位秒
  res.setHeader("Cache-Control", "max-age=5")

last-modified 协商缓存以后台设定的过期时间为准，前台无法感知

      // http 1.1 协商缓存 - 文件最终修改时间
      res.setHeader("Cache-Control", "no-cache")
      res.setHeader("last-modified", new Date().toUTCString())
      if (new Date(req.headers['if-modified-since']).getTime() + 3000 > Date.now()) {
        res.statusCode = 304
        res.end()
        return
      }

Etag 协商缓存以文件的最终修改时间为准，前台无法感知

  // http 1.1 协商缓存 - 文件内容概览hash对比
  res.setHeader("Cache-Control", "no-cache")
  const crypto = require("crypto")
  const hash = crypto.createHash("sha1").update(content).digest("hex");
  res.setHeader("Etag", hash)
  if (req.headers["if-none-match"] === hash) {
    res.statusCode = 304
    res.end()
    return
  }