缓存失效策略怎么设？过期时间别乱填

你有没有遇到过这种情况：网页改了CSS，刷新十次还是旧样式；后台更新了商品价格，手机App里却还显示昨天的数字？八成是缓存没“按时下班”——该失效的时候没失效，该更新的时候没更新。

缓存不是越久越好

很多人一听说“缓存能提速”，就恨不得把所有资源都设成一年过期。结果呢？用户看到的是过时内容，运营发不了紧急公告，开发改个按钮颜色还得清全网CDN缓存。缓存的本质是“临时快照”，不是“永久存档”。关键不在“存多久”，而在“什么时候该丢掉”。

三种常见失效策略，别混着用

1. 固定过期时间（Expires / Cache-Control: max-age）
最直白的方式：告诉浏览器“这个JS文件，从现在起2小时后作废”。适合静态资源，比如logo.png、vendor.js这类基本不常改的文件。

Cache-Control: max-age=7200

但注意：如果中途你偷偷改了这个JS，用户两小时内根本看不到新效果——除非他硬刷新或清缓存。

2. 基于校验的失效（ETag / Last-Modified）
浏览器每次请求先问一句：“我手里这个版本还是不是最新的？”服务器比对后返回 304 Not Modified 或 200 + 新内容。适合内容可能小修但不频繁变动的页面，比如文章详情页的标题偶尔微调。

ETag: "abc123"
Last-Modified: Wed, 12 Jun 2024 10:30:45 GMT

3. 主动失效（Cache Invalidation）
发布新版本时，直接让CDN或反向代理删掉旧缓存。比如给CSS文件名加哈希：style.a8f3b2d.css。文件名一变，浏览器自然当它是新资源，老缓存自动作废。这是前端工程化里最靠谱的“缓存可控”方式。

过期时间设置，得看它“动不动”

别死记“JS设2小时，图片设7天”。打开你网站的Chrome开发者工具 → Network 标签页，点开一个JS文件，看它的Response Headers里有没有 cache-control。再想想：这个文件上线后，你预计多久会改一次？

• 首页HTML：可能每小时有运营活动插播 → max-age=300（5分钟）
• 用户头像接口响应：个人中心页，用户自己改头像才变 → 可用 ETag + max-age=3600
• vendors.9f3a2c.js：Webpack打包生成，内容不变哈希就不变 → max-age=31536000（1年）

一个小动作，避开大坑

上线前别光改代码，顺手检查下Nginx或CDN后台的缓存规则。有些CDN默认把所有HTML都缓存10分钟，你后端明明返回了 Cache-Control: no-cache，结果被CDN“好心”覆盖了。这时候得在CDN控制台单独配一条规则：对 *.html 强制不缓存，或只缓存1秒。

缓存不是开关，是个精细活。过期时间不是拍脑袋填的数字，而是你对内容更新节奏的理解。改完配置，拿手机访问一遍，再改个文字，再刷新——亲眼看到它变了，才算真生效。