HTML页面缓存平衡核心是“按需缓存、可控失效”：首页/列表页设短缓存（如max-age=60）、用Vary区分用户、启用stale机制防雪崩，并分离静态区块长期缓存。
HTML 页面的缓存平衡，核心在于“按需缓存、可控失效”——不是禁用缓存，也不是一缓了之，而是让首页、列表页这类有动态成分但更新不频繁的页面，在保证用户看到最新内容的前提下，显著降低后端压力。
首页/列表页慎缓存，优先靠响应头控制
这类页面通常混合了公共内容（如导航栏、广告位）和轻微动态内容（如登录态提示、时间戳），直接全量缓存风险高。推荐做法是：
- 后端在返回 HTML 时主动设置 Cache-Control: public, max-age=60（例如 1 分钟），明确告诉 Nginx 和浏览器“可缓存但仅 60 秒有效”
- Nginx 不覆盖该头部，即不加
add_header Cache-Control指令，尊重后端语义 - 若后端无法控制，可在 location 中用
proxy_ignore_headers Cache-Control+proxy_cache_valid 200 60s强制兜底
用 Vary 头区分用户视角，避免私有内容污染缓存
当页面根据 Cookie（如是否登录、语言偏好）呈现不同内容时，必须防止 A 用户的登录页被缓存后返回给 B 用户：
- 后端响应中添加 Vary: Cookie（或更精确的
Vary: Cookie, Accept-Language） - Nginx 配置中启用
proxy_cache_key $scheme$host$request_uri$cookie_user_id$cookie_lang;（按实际 Cookie 名调整），确保不同用户生成不同缓存键 - 避免简单用
$request_uri作 key，否则所有用户共用一份缓存，极易出错
启用 stale 机制，缓解刷新洪峰
用户集中刷新首页时，若缓存过期，大量请求会同时打到后端，造成瞬时压力。Nginx 的 stale 机制能优雅应对：
立即学习“前端免费学习笔记（深入）”；
- 配置
proxy_cache_use_stale updating timeout http_500;，允许在后台更新缓存或后端超时时，继续返回旧缓存 - 搭配
proxy_cache_lock on;和proxy_cache_lock_timeout 5s;，确保同一 key 只有一个请求去回源，其余等待并复用结果 - 这样既避免雪崩，又保障绝大多数用户仍能快速拿到“稍旧但可用”的页面
静态片段分离，让真正不变的部分长期缓存
纯静态 HTML 很少，但其中大部分区域（如页头、页脚、侧边栏）变更频率远低于主体内容。可考虑：
- 后端将页面拆为“主内容区 + 静态区块”，主内容走短缓存（如 60s），静态区块单独接口返回并设
max-age=86400 - 前端用 JS 或 ESI（Nginx 支持）异步加载静态区块，实现局部缓存、整体灵活
- 若用 Vue/React 等 SPA，HTML 文件本身只需缓存 1 小时（含 hash 的 JS/CSS 已由静态规则长期缓存），无需纠结内容实时性
