浏览器强制读取旧CSS文件的典型表现是修改后样式不更新，因缓存未失效；应采用URL版本化（如style.a1b2c3d4.css）配合Cache-Control: public, max-age=31536000实现高效缓存更新。
浏览器强制读取旧 CSS 文件的典型表现
修改了 style.css，也确认服务器返回了新内容，但页面样式没变——大概率是浏览器缓存了旧版本。常见现象包括：本地改完刷新无效、部署后用户仍看到旧按钮颜色、Ctrl+F5 强刷才生效，而普通 F5 或地址栏回车依旧走缓存。
用 Cache-Control 控制静态资源缓存策略
关键不是禁用缓存，而是让缓存“可更新”。对 CSS 文件，推荐服务端返回：Cache-Control: public, max-age=31536000（即 1 年），但前提是文件名或 URL 随内容变化。如果始终用 /css/style.css 这种固定路径，max-age 设再小（比如 60 秒）也会导致中间 CDN 或代理反复拉取旧响应，反而加剧不一致。
- 开发环境可设
Cache-Control: no-cache，强制每次校验ETag或Last-Modified - 生产环境避免
no-store：它禁用所有缓存，增加带宽和延迟，且无法解决“用户已缓存旧版”的问题 - 若用 Nginx，配置类似：
location ~ \.css$ { add_header Cache-Control "public, max-age=31536000"; }
URL 版本化比文件内加注释更可靠
在 HTML 中引用 CSS 时，不要依赖 /* v2.1.0 */ 这类注释触发更新——浏览器根本不解析 CSS 内容来判断是否过期。真正有效的是让 URL 变化：
- 构建时重命名：把
style.css输出为style.a1b2c3d4.css，HTML 中写 - 查询参数方式（慎用）：
，但部分 CDN 或代理可能忽略v=参数，导致缓存未失效 - Webpack/Vite 等工具默认开启 contenthash，只要 CSS 内容变，hash 就变，URL 自然不同
Link: rel="preload" 不会绕过缓存逻辑
有人尝试用 强制预加载新样式，但这只是提示浏览器提前请求，并不改变缓存判定规则。如果 style.css 已被缓存且未过期，preload 仍会复用旧缓存条目。
立即学习“前端免费学习笔记（深入）”；
真正要打破旧缓存，必须让新请求的 URL 与旧请求不一致，或者服务端明确返回 Cache-Control: no-cache + 有效 ETag，让浏览器发起条件请求并收到 304 Not Modified 或 200 新内容。实际项目里，URL 版本化 + 长期缓存是最轻量、最可控的组合。
