CSS 改了不生效：缓存这关绕不过去

发布于 3天前

样式改了，本地验证没问题，发到线上用户截图过来还是旧样子 💾。这种反馈接过不止一次，根子都在同一个地方：浏览器手里的缓存还没过期。

先想清楚缓存在哪几层

浏览器本地一份，中间代理一份，CDN 边缘节点还有一份。只盯着浏览器硬刷新，治标不治本，CDN 那层照样把旧文件喂给下一个用户 ⚠️。

<link rel="stylesheet" href="style.css?v=20261002">

改了参数，浏览器当成新资源重新请求。简单有效，但有两个软肋：部分中间代理会忽略查询串做缓存键，手动改版本号也总有忘的时候。

<link rel="stylesheet" href="style.a1b2c3.css">

构建工具按文件内容算 hash，内容变名字必变 ✅。静态资源可以放心配上一年长缓存，更新靠改名天然破缓存，这是最干净的做法。

结论：HTML 短缓存指方向，静态资源长缓存加指纹，两层各管各的，缓存问题基本绝迹。

常见问题（FAQ）

为什么改了 CSS 用户看到的还是旧样式？

浏览器或 CDN 缓存中的旧文件还没过期，用户拿到的仍是旧版本，与代码是否正确无关。

?v= 参数和文件指纹有什么区别？

查询串版本号可能被部分代理忽略，仍需手动维护。文件指纹按内容生成，改名即破缓存，自动化程度高，是最彻底的方案。

文件指纹怎么生成？

构建工具在打包时按文件内容计算 hash 值，嵌入文件名。内容变化则 hash 变化，引用同步更新。

HTML 文件本身的缓存怎么处理？

HTML 应使用短缓存或不缓存。HTML 是入口，拿不到新 HTML，新的资源指纹就无法被发现。

CDN 层面需要做什么配合？

配置合理的回源与缓存键规则，发布流程中加入缓存刷新步骤，确保边缘节点及时取到新文件。