跳到主要内容

浏览器缓存

两类核心缓存​

强缓存​

命中后不会向服务器发请求，常见响应头：

  • Cache-Control: max-age=...
  • Expires

适合：

  • 文件名带 hash 的 JS / CSS / 图片
  • 内容稳定、可长期缓存的静态资源

协商缓存​

浏览器会带上标识发请求，由服务端决定资源是否可复用。

常见配对：

  • ETag / If-None-Match
  • Last-Modified / If-Modified-Since

适合：

  • HTML 文档
  • 需要服务端判断是否更新的接口或资源

常见项目策略​

  • HTML：通常走协商缓存，保证入口页面可更新
  • JS / CSS / 图片：走强缓存，文件名带内容 hash
  • 接口响应：按业务决定是否缓存，避免一刀切

刷新时会发生什么​

  • 地址栏回车：可能直接命中已有缓存
  • F5：通常会跳过强缓存，但仍可能走协商缓存
  • Ctrl + F5：强制重新请求资源

实战提醒​

  • 不要把“缓存没生效”和“资源路径变了”混为一谈
  • 静态资源上 hash，比手动改版本号更稳定
  • 观察缓存时优先看浏览器 Network 面板里的 from memory cache、from disk cache、304