移动端缓存优化核心是分层控制：html禁强缓存并强制验证，静态资源用哈希+immutable长期缓存，统一用cache-control替代expires规避时钟偏差。
移动端访问体验优化的关键不在“加缓存”，而在“分层控制”——HTML 必须可及时更新，静态资源必须强缓存且不依赖设备时钟。直接套用桌面端 expires 配置，容易在 iOS Safari 或低端安卓机上引发白屏、样式错乱或资源不更新。
HTML 文件：禁用强缓存，强制验证
入口 HTML（如 /index.html）不能设 expires 或 long max-age。iOS Safari 会将其缓存为 PWA 启动页或导航标题，更新后不刷新。
- 推荐配置：add_header Cache-Control "no-store, must-revalidate"; —— 完全禁用缓存，每次请求新内容，适合对一致性要求极高的场景
- 兼顾性能的替代方案：add_header Cache-Control "private, max-age=0, no-cache, must-revalidate"; 并确保后端稳定返回一致 ETag（避免 gzip 差异导致 ETag 变化）
- 绝对禁止对
.html文件使用expires指令，尤其在 location 块中全局匹配时
静态资源：哈希化 + immutable 长期缓存
JS/CSS/图片/字体等资源应通过构建工具生成带内容哈希的文件名（如 app.f3a8b2e4.js），再由 Nginx 精准匹配并赋予最长有效期。
- 匹配规则示例：
location ~* "\.[a-f0-9]{8,}\.(js|css|png|jpg|woff2)$" { add_header Cache-Control "public, max-age=31536000, immutable" always; } - immutable 告诉 Chrome 49+ 和 Safari 11.1+：“此 URL 内容永不变更”，跳过条件请求（If-None-Match），显著减少网络往返
- 避免用
?v=1.2.3类查询参数做版本控制——微信内置浏览器、部分安卓 WebView 会忽略参数变化，仍读旧缓存
移动端专属缓存策略微调
针对移动网络波动大、设备时钟不准的特点，需规避时间敏感型指令。
- 统一用 Cache-Control 替代
expires：前者基于相对时间（max-age），不受客户端时钟偏差影响；后者依赖绝对时间，低端安卓机若未开启自动校时，偏差可达数小时 - 对 SVG、字体等低频更新资源，可在 max-age 基础上追加 stale-while-revalidate，允许过期后短暂使用旧资源并后台验证
- 如需区分移动设备配置（如 /mobile 接口），可用
map模块识别 UA，但更推荐服务端响应头动态控制，Nginx 层保持路径中立
验证与避坑要点
仅看响应头是否设置成功远远不够，真实设备行为才是最终标准。
- 用 Safari 开发者工具连接真机，查看 Network → Headers 中的 cache-control 和 age 字段，确认是否命中
- 在安卓开发者选项中关闭“自动设置时间”，手动偏移 ±10 分钟，测试 expires 是否误失效
- Chrome for Android 可启用
chrome://flags/#enable-web-cache查看缓存状态，注意区分HIT、MISS和STALE - 监控 CDN 与 Nginx 缓存周期是否对齐，避免 CDN 过期而源站未更新，或源站已更新但 CDN 仍回源失败
