确认内存泄漏需观察performance.memory.usedjsheapsize是否持续上涨，或memory面板曲线呈阶梯式上升；定时器、事件监听器未清理及闭包意外持有大对象是主因，须显式清除并用heap snapshot分析retainers链路。
怎么确认页面正在内存泄漏
直接看 performance.memory.usedJSHeapSize 是否持续上涨：在 Chrome 控制台反复执行这个表达式，配合页面典型操作（比如打开/关闭弹窗、切换路由），如果数值每次操作后都明显升高且不回落，基本就是泄漏了。更直观的是打开 DevTools → Memory 面板 → 勾选 “Memory” 曲线 → 点录制 → 操作 → 停止，若曲线呈阶梯式上升而非回到基线，就该排查了。
setInterval / setTimeout 漏清理的典型表现和修复
常见错误现象是组件卸载后，还能在控制台调用到本该销毁的定时器回调函数；或者 Heap Snapshot 里搜 Interval 或 Timeout，发现 retaining path 指向已销毁的 Vue 实例或 React 组件。
- 必须保存 timer ID，且在卸载时显式调用
clearInterval或clearTimeout，不能只声明不清理 - 避免把 timer ID 存在全局变量或闭包外层作用域里——容易被遗忘或误删
- React 中写在
useEffect里的定时器，cleanup 函数必须返回清除逻辑：return () => clearInterval(id)，且id要定义在 effect 外部作用域 - Vue 3 用
onUnmounted，Vue 2 用beforeDestroy，都不能依赖框架自动处理
addEventListener 绑了没解绑怎么快速定位
打开 Elements 面板 → 任选一个节点 → 右侧 Event Listeners 标签 → 查看监听器数量是否随操作递增；再切到 Memory 面板拍 Heap Snapshot → 搜索 Detached HTMLDivElement，点开看 Retainers，如果路径里有 Closure → function → element，就是监听器闭包 hold 住了 DOM。
- 绝对不要用
el.addEventListener('click', () => {})这种内联写法，removeEventListener 无法匹配 - 绑定和解绑必须用同一个函数引用：先定义
const handler = () => {}，再传入addEventListener和removeEventListener - 优先加
{ once: true }，尤其适合初始化类事件（如load、DOMContentLoaded） - 对 window/document 的监听器最容易漏，建议统一用
AbortController管理：element.addEventListener('click', handler, { signal: controller.signal })，后续只需controller.abort()
闭包意外持有大对象的隐蔽坑
闭包本身不泄漏，但一旦它被定时器、事件监听器、全局 emitter 等长生命周期对象引用，整个捕获的作用域（包括 this、state、DOM 节点、大数组）就全锁住了。
- 定时器回调里避免直接读
this.state或store.xxx，改用参数传入必要字段，或用useRef存快照值 - Vue 3 的
onBeforeUnmount或 React 的useEffect cleanup里，清除逻辑要覆盖所有可能的闭包源头：不只是事件，还有IntersectionObserver、ResizeObserver、WebSocket - 第三方库（如 ECharts、Leaflet）初始化后常自动绑定 resize 监听器，务必查文档调用
.dispose()或手动removeEventListener - WeakMap/WeakSet 不是万能解药，它们解决的是键引用问题，对闭包持有的值无感——该清的还得手动清
performance.memory 数值变化，才是最不可绕过的验证依据。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
