HTTP 缓存控制实战（Cache-Control、ETag、Last-Modified 正确用法）

HTTP 缓存控制实战（Cache-Control、ETag、Last-Modified 正确用法）概述HTTP 缓存影响加载性能与流量成本。本文梳理浏览器与 CDN 的协同策略，给出可直接套用的报文配置。关键概念与参数强缓存（浏览器本地）：`Cache-Control: max-age`/`immutable`；命中不发请求协商缓存（需请求验证）：`ETag`（内容哈希）与 `Last-Modified`（修改时间）CDN 特有：`s-maxage`（共享缓存）、`stale-while-revalidate`/`stale-if-error`不缓存：`no-store`；允许缓存但每次协商：`no-cache`推荐配置示例静态版本化资源（含指纹）：Cache-Control: public, max-age=31536000, immutable 未版本化资源（HTML）：Cache-Control: no-cache ETag: "<hash>" CDN 友好策略（允许过期后后台刷新）：Cache-Control: public, max-age=600, s-maxage=600, stale-while-revalidate=60 验证方法使用 DevTools Network 观察 `from memory/disk cache` 与 `304 Not Modified`通过 `curl -I` 检查响应头是否符合预期在 CDN 控制台查看命中率与回源比例注意事项指纹化是强缓存的前提；避免对非指纹资源设置长缓存`no-cache` 并非不缓存；它要求每次协商验证CDN 与浏览器策略可能冲突，应优先以 CDN 规则为准并统一配置