最推荐做法是构建工具为静态资源生成内容哈希文件名（如app.8a3f1e2d.js），配合HTTP响应头Cache-Control: max-age=31536000, immutable实现长期强缓存且不可变，HTML则设no-cache、must-revalidate并启用ETag协商验证，确保浏览器自动拉取新版本而非清除旧缓存。
JavaScript 本身不能直接删除浏览器磁盘上的缓存文件，但可以通过策略让浏览器跳过旧缓存、主动拉取新版本，从而避免用户加载过期代码。关键不是“清除”，而是“绕过”或“失效”缓存。
给静态资源加哈希或版本号
这是最稳定、最推荐的生产环境做法。构建工具（如 Webpack、Vite）会自动为 JS/CSS 文件名注入内容哈希，例如 app.8a3f1e2d.js。只要文件内容变化，哈希就变，URL 就不同，浏览器自然当作新资源请求，完全不走旧缓存。
- 无需改业务逻辑，只需配置构建工具开启文件名哈希
- HTML 中引用的 script/link 标签也需同步更新（现代构建工具自动处理）
- 比时间戳更可靠：避免重复请求，保留有效缓存价值
合理设置 HTTP 缓存响应头
前端无法发响应头，但必须和后端或托管平台协同配置，控制缓存生命周期：
-
Cache-Control: max-age=31536000, immutable—— 对带哈希的静态资源，长期强缓存（1年），且声明不可变 -
Cache-Control: no-cache, must-revalidate—— 对 HTML 文件，每次请求都向服务器验证（用 ETag 或 Last-Modified） - 纯静态站点可借助
_headers（Netlify）、vercel.json或 Nginx 规则统一配置，无需改代码
用 Service Worker 主动管理缓存
适合 PWA 或需要离线能力的应用。SW 可拦截请求、判断资源是否过期，并决定从缓存还是网络获取：
立即学习“Java免费学习笔记（深入）”；
- 安装新 SW 时调用
caches.delete('v1')清掉旧缓存 - fetch 事件中优先 match 缓存，失败再 fetch 网络（缓存优先）
- 新 SW 需调用
self.skipWaiting()和clients.claim()才能立即生效
按需触发强制刷新（仅限用户主动场景）
不建议默认使用，但可在“检查更新”按钮等明确用户意图时调用：
-
window.location.reload()—— 现代浏览器中参数true已被忽略，效果等同于普通重载 -
window.location.replace(window.location.href)—— 替换当前历史记录，避免后退看到旧状态 - 更优做法：先用 fetch 检查版本接口（如
/version.json），发现有新版本再提示并刷新
