JavaScript无法直接清理历史页面缓存，需主动释放DOM节点、解绑事件监听器、清空应用级缓存（如路由缓存、数据缓存、Service Worker缓存、IndexedDB）、销毁Canvas/WebGL/音频/Web Worker等底层资源，并通过DevTools Memory面板验证内存是否真正释放。
JavaScript 本身不提供直接“清理历史页面缓存”的 API，因为浏览器不会把已卸载的页面 DOM 或 JS 执行上下文当作可手动回收的“内存块”。所谓“历史页面缓存”，实际是三类东西在起作用：DOM 节点残留、事件监听器未解绑、以及应用层缓存（如路由缓存、数据缓存、Service Worker 缓存、IndexedDB 等）。大型单页应用（SPA）卡顿、内存暴涨，往往不是因为“页面没删干净”，而是这些资源没被主动释放。
主动销毁无用 DOM 和监听器
路由切换后，旧页面的根节点若未显式移除，且仍被变量引用或绑定着全局事件（比如 window.scroll、document.click），就会持续占用内存。
- 在组件卸载（如 Vue 的 beforeUnmount、React 的 useEffect cleanup、或自定义路由钩子）中，调用 element.remove() 或 rootNode.innerHTML = '' 清空 DOM 树
- 手动解绑所有通过 addEventListener 添加的监听器，尤其注意第三方库（如地图、图表）内部创建的监听器，它们通常需调用对应实例的 destroy() 或 off() 方法
- 避免闭包长期持有对 DOM 节点或大对象的引用 —— 比如在定时器回调里反复读取某个已卸载组件的 state
清空应用级缓存容器
SPA 常自行维护缓存来提升体验，但若不控制生命周期，会越积越多。
- 路由级组件缓存（如 Vue 的 <keep-alive>、React 的 memo + 自定义缓存逻辑）：在路由离开时触发 include/exclude 更新 或调用 deactivate hook 清理内部状态，必要时调用 cache.delete(key)
- 数据请求缓存（如 Redux Toolkit Query、SWR、Apollo Client）：使用内置机制失效缓存，例如 api.util.invalidateTags(['User']) 或 mutate(key, undefined, { revalidate: false })
- Canvas/WebGL 纹理、音频上下文、Web Worker 实例：必须显式调用 ctx.clearRect()、audioCtx.close()、worker.terminate()，否则底层资源不会释放
管理 Service Worker 与 Cache API
如果用了 PWA 或离线能力，Service Worker 控制的 Cache 存储可能保存了大量历史 HTML/JS/CSS 版本。
立即学习“Java免费学习笔记（深入）”；
- 在新版本 SW 激活时，在 activate 事件中清理旧缓存：caches.keys().then(keys => Promise.all(keys.map(k => k.includes('old-') ? caches.delete(k) : null)))
- 避免在 fetch 事件中无条件 cache.put(req, res.clone())；应按资源类型分级缓存（如只缓存 /assets/ 下静态文件，排除 /api/）
- 调试阶段可在 DevTools → Application → Cache Storage 中手动删除命名缓存，验证是否残留
监控与验证是否真释放了内存
光写清除逻辑不够，得确认它生效。别依赖“看起来不卡”——要用工具验证。
- 打开 Chrome DevTools → Memory 面板，录制两次快照（切换页面前后），用 Comparison 查看新增的 detached DOM trees、listener count、JS heap size 变化
- 关注 Retainers 列表：若某 DOM 节点显示 “(closure)” 或 “(event listener)” 作为保留者，说明仍有代码持有着它
- 在控制台执行 performance.memory（若支持）查看 JS 堆使用量趋势；长期运行后堆大小稳定不升，才是健康状态
