### [CSS 改了不生效：缓存这关绕不过去](https://www.huociguo.com/article/1820)

**Published:** 2026-10-02T10:45:36

**Author:** 米了

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

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

![机械硬盘特写](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-6429131.jpeg)

缓存加快访问，也会把旧版本拦在用户面前

## 先想清楚缓存在哪几层

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

## 治标方案：版本参数

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

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

## 治本方案：文件名指纹

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

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

## 配套的三件事

-   HTML 引用要跟着指纹走，交给构建工具自动注入，手工维护必出错。
-   HTML 本身用短缓存或不缓存，入口拿不到新版本，资源指纹再准也没用。
-   CDN 发布流程里加刷新步骤，确认边缘节点回源取到新文件 📦。

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

**Tags:** CDN缓存, link标签, 文件指纹, 版本号, 缓存破击

**Categories:** HTML5

---