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: "" ``` 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 规则为准并统一配置