HTTP 缓存

强缓存与协商缓存

强缓存：浏览器直接从本地取，不发请求。由 Cache-Control: max-age=31536000 或已废弃的 Expires 头控制。命中时 Network 面板显示「from disk cache」或「from memory cache」，状态码 200。协商缓存：缓存过期后，浏览器携带 If-None-Match（ETag 值）或 If-Modified-Since（日期）请求服务器，服务器比对后若资源未变返回 304 Not Modified，浏览器继续用本地副本；若已变则返回 200 + 新内容。ETag 比 Last-Modified 精度高，因为后者只精确到秒。[1]

现代工程实践

Webpack、Vite 等打包工具会对 JS/CSS 文件名加内容哈希（如 main.a3f8c2.js），使每次内容变更后文件名不同，可安全设置超长 max-age（immutable）；而 index.html 入口文件则设置 no-cache 或极短 max-age，让浏览器每次验证，保证用户能拿到最新的资源引用。Cache-Control: no-store（完全不缓存）和 no-cache（缓存但必须验证）含义不同，是面试中常考的混淆点。Service Worker 可在 JS 层完全接管缓存策略，与 HTTP 缓存并行工作但优先级更高。