单页应用路由切换内存泄漏的核心是旧资源未清理而新资源叠加，主要源于未注销全局监听器、未清除定时器、意外持有全局引用；需在组件卸载时配对移除事件监听、清除定时器ID、避免全局挂载和DOM节点残留，并用Chrome DevTools验证修复效果。
单页应用（SPA）频繁切换路由时出现的内存泄漏，核心问题在于“旧资源没清理，新资源又叠加”。这不是代码报错，而是页面越用越卡、堆内存持续上涨的隐性问题。关键要抓住三类高频泄漏源：未注销的全局监听器、未清除的定时器、意外持有的全局引用。
滚动监听器必须配对注销
很多吸顶栏、懒加载逻辑会在 useEffect 或 mounted 中直接绑定 window.addEventListener('scroll', ...)，但忘了返回清理函数。每次进入页面都新增一个监听器，而它们全挂在 window 上，组件卸载后依然运行。
- React 中确保
useEffect返回清理函数：return () => window.removeEventListener('scroll', handler) - Vue 2 在
beforeDestroy、Vue 3 在onBeforeUnmount中手动移除 - 避免在监听回调里直接操作 DOM 节点或引用组件状态，否则闭包会延长对象生命周期
定时器要存 ID 并显式清除
setInterval 和 setTimeout 的回调一旦创建，就会持有其闭包内所有变量。如果组件销毁时没调用 clearInterval 或 clearTimeout，这些变量就无法被回收。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 声明定时器时务必保存返回的 ID：
const timerId = setInterval(...) - 在组件卸载钩子中清除：
clearInterval(timerId) - 不要把定时器逻辑写在匿名函数里，避免无法引用 ID；更不要在
useEffect依赖数组为空时反复新建而不清理
杜绝意外的全局变量和 DOM 引用
漏掉 let/const 声明、或直接往 window 上挂属性（比如 window.myData = this），会让对象长期驻留内存。同样，缓存了已从 DOM 移除的节点（如 document.getElementById 后未清空引用），也会阻止 GC 回收。
立即学习“Java免费学习笔记（深入）”；
- 启用
"use strict"，让未声明变量赋值直接报错 - 避免在组件中给
window、document等全局对象添加属性 - 移除 DOM 元素前，先解绑事件、清空引用变量（如设为
null）
用工具验证是否真修复了
光靠逻辑判断不够，得用浏览器工具确认效果：
- 打开 Chrome DevTools → Memory 面板 → 拍摄堆快照（Heap Snapshot），切换几次路由后对比，看是否有重复的组件实例或 Detached DOM 节点
- Performance 面板录制一段切换操作，观察 JS Heap 曲线是否平稳，而非阶梯式上升
- 在 CI 流程中加入 ESLint 插件（如
eslint-plugin-react-perf），自动检测未清理的监听器和定时器模式
