http-caching

HTTP Caching Skill — 全栈缓存实战

何时使用

• 设计 API / 静态资源缓存策略
• 排查"为什么 CDN 没命中" / "为什么改了内容浏览器还显示旧版"
• 优化 TTFB / Core Web Vitals 中 LCP
• 评审静态资源构建产物的 cache header
• 实现 cache invalidation（部署后旧缓存失效）

一、缓存层级（从近到远）

[ Browser Memory Cache ]    ← 最快，关闭 tab 丢失
        ↓
[ Browser Disk Cache ]      ← 持久，跨会话
        ↓
[ Service Worker Cache ]    ← 可编程，离线能力
        ↓
[ ISP / Corporate Proxy ]   ← 共享缓存
        ↓
[ CDN Edge ]                ← 全球分发，TTL 可控
        ↓
[ Reverse Proxy (nginx) ]   ← 应用前端
        ↓
[ Application Memory ]      ← 进程内 LRU
        ↓
[ Distributed Cache (Redis) ]  ← 跨实例共享
        ↓
[ Database ]                ← 持久层

每一层都受 HTTP header 控制（除 app 内存 / Redis 是程序自管）。

二、Cache-Control 指令完全清单

Cache-Control: public, max-age=3600, s-maxage=86400, stale-while-revalidate=600, must-revalidate

指令	含义
public	任何缓存（包括 CDN / proxy）都可存
private	仅浏览器可存（不可 CDN）
no-cache	可存但每次必须先验证（条件请求）
no-store	绝对不存 — 用于敏感数据
max-age=N	浏览器缓存 N 秒
s-maxage=N	CDN / shared cache 缓存 N 秒（覆盖 max-age）
must-revalidate	过期后必须验证，不可用 stale
proxy-revalidate	同上但仅对 shared cache
immutable	客户端不要做条件请求（带 hash 文件名时用）
stale-while-revalidate=N	过期后 N 秒内可返回 stale，后台异步更新
stale-if-error=N	上游错误时可返回 stale N 秒

三、四种典型策略

1. 不可变文件（带 hash 文件名）

Cache-Control: public, max-age=31536000, immutable

bundle.a1b2c3.js — 1 年缓存，永不验证。文件变了 hash 也变了，URL 变了浏览器自然取新。

2. HTML 入口

Cache-Control: no-cache

每次必须验证。配合 ETag 实现 "未变 304"，变了拉新版（带新 hash 的 bundle 引用）。

3. API 响应（频繁更新）

Cache-Control: private, max-age=0, must-revalidate

或者用 ETag 节省带宽：

Cache-Control: private, max-age=60
ETag: "W/abc123"

4. CDN 强缓存 + SWR

Cache-Control: public, max-age=60, s-maxage=86400, stale-while-revalidate=600

• 浏览器：60s 内不发请求
• CDN：1 天内直接返回；过期后再 10 分钟可返 stale 同时后台更新
• 实际命中率极高，源站压力极低

四、ETag / Last-Modified 协商缓存

服务端响应：

HTTP/1.1 200 OK
ETag: "v3-abc123"
Last-Modified: Wed, 06 May 2026 06:00:00 GMT