HTTP 缓存入门：强缓存与协商缓存，一篇讲清浏览器在想什么

资源更新了但用户看到的还是旧版？或者每次刷新都重新下载几百 KB 的静态文件？这两个问题的答案都在 HTTP 缓存机制里。理解强缓存与协商缓存，前端与运维排障都会顺畅很多。

一、强缓存：不发请求

响应头带 Cache-Control: max-age=31536000 时，浏览器在有效期内直接用本地副本，根本不发请求（DevTools 里显示 from disk/memory cache）。适合带哈希指纹的静态资源（app.a3f9.js），变更即换文件名。

二、协商缓存：问一下再用

没有强缓存时，浏览器带 If-None-Match（ETag）或 If-Modified-Since 发请求问服务器：资源变了吗？没变返回 304 Not Modified，浏览器继续用本地副本——省流量但不省请求。适合 index.html 这类入口文件。

三、经典组合策略

• 入口 HTML：Cache-Control: no-cache，每次走协商缓存，保证用户第一时间看到新版本；
• 带哈希的 JS/CSS/图片：max-age=31536000, immutable，一年强缓存；
• API 响应：按业务设定或直接 no-store，防止敏感数据被缓存。

四、排障技巧

怀疑缓存问题时：DevTools Network 面板勾选 Disable cache 复现；检查响应头是否有 Cache-Control；刷新类型有讲究——普通刷新走协商缓存，Ctrl+F5 强制刷新才绕过强缓存。

结语：强缓存负责"快"，协商缓存负责"新"，两者配合就是现代 Web 缓存的全部骨架。