最典型的缓存问题是浏览器对CSS/JS等外部资源强缓存导致新版本不生效，根本原因是link/script引用的资源设置了长缓存（如max-age=31536000），而HTML常被设为不缓存；实操需为静态资源加版本号或哈希后缀，并确保构建工具自动注入，同时检查CDN、代理、Service Worker及预加载等多层缓存源。
HTML资源加载时浏览器直接读缓存，新版本CSS/JS不生效
这是最典型的缓存问题：你改了style.css和app.js，也重新部署了，但用户打开页面还是旧样式、旧逻辑。根本原因不是HTML本身缓存了，而是浏览器对link和script标签引用的外部资源做了强缓存（比如Cache-Control: max-age=31536000），HTML文件自己反而常被设成不缓存。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给静态资源路径加版本标识，比如把
<link rel="stylesheet" href="style.css">改成<link rel="stylesheet" href="style.css?v=2.3.1">或哈希后缀style.a1b2c3.css - 确保构建工具（如Webpack、Vite）自动注入哈希到文件名和HTML中；手写的话，别只改
v=参数却不更新服务器上的文件，否则白搭 - 避免在开发环境用
meta http-equiv="Cache-Control"——它对link/script引用的资源基本无效，且现代浏览器越来越忽略这类meta标签
HTML文件自己被CDN或代理缓存，导致页面结构没更新
当HTML是服务端动态生成（如PHP/Node.js模板）时，缓存问题往往出在中间层：CDN、反向代理（Nginx）、甚至浏览器对index.html做了304协商缓存。这时候你看到的“页面没变”，其实是整个HTML文档压根没重新请求。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查响应头：
curl -I https://yoursite.com/看是否有Cache-Control或Expires字段；重点盯max-age值是否过大（比如max-age=86400就是缓存一天） - 对纯静态HTML（如SPA的
index.html），应设置Cache-Control: no-cache, must-revalidate——注意不是no-store，后者会禁用所有缓存机制，影响首屏性能 - 如果用了CDN（Cloudflare、阿里云DCDN等），确认其缓存规则是否把
/index.html归入了“静态资源”类并设置了长缓存；需单独配置路径缓存策略，排除index.html
Service Worker拦截请求并返回过期HTML或资源
一旦注册了Service Worker，它就接管了页面所有网络请求。如果SW脚本里写了cache.match()优先返回缓存，而没做版本比对或清理旧缓存，就会死锁在旧版页面里——连强制刷新（Ctrl+F5）都无效，因为SW仍会拦截并返回缓存内容。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每次更新SW脚本内容（哪怕只改一个空格），浏览器才会触发
install事件并尝试激活新版本；光改HTML或JS文件不会触发SW更新 - 在
activate事件里调用cache.delete()删掉旧cacheName，比如caches.delete('static-v1')；不清理的话，多个版本缓存共存，match()可能随机返回任意一个 - 调试时临时禁用SW：Chrome DevTools → Application → Service Workers → 勾选
Update on reload，再点Unregister，避免干扰排查
本地开发时浏览器预加载/推测性请求导致“看似没更新”
Chrome和Edge会基于历史行为预加载link[rel=preload]或推测用户下一步要访问的页面（prerender已废弃，但prefetch仍在）。如果你刚改完代码就立刻点链接跳转，可能加载的是之前缓存的预取结果，而非最新HTML。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查Network面板，过滤
type: prefetch或看请求发起者（Initiator）是不是Other或Prerender；这种请求无法通过HTTP头控制，只能从源头规避 - 开发阶段暂时移除
<link rel="prefetch" href="...">，或用as="document"明确类型，减少误判 - 更可靠的做法：用
location.reload(true)强制绕过缓存重载（注意：true参数在部分新版浏览器中已被忽略，实际效果取决于当前页面是否被SW控制）
缓存问题真正难缠的地方，从来不在“怎么清”，而在“谁在缓”——可能是CDN、代理、浏览器、Service Worker、甚至IDE的Live Server插件自己带缓存。定位时先抓包看响应头，再逐层关掉中间件，比反复改HTML的meta标签有用得多。
