千万级DOM节点本身不必然导致内存泄漏，但会放大未清理引用的后果；真正要盯的是Detached节点数是否随操作线性增长，可用$$('*').length快速筛查，Performance面板Nodes曲线和Memory面板Detached节点快照比JS Heap更早暴露问题。
千万级 DOM 节点本身不必然导致内存泄漏，但会显著放大任何未清理引用的后果；真正要盯的是“Detached 节点数是否随操作线性增长”，而不是总节点数。
用 $$('*').length 快速筛出泄漏信号，别信任务管理器内存数字
Chrome 任务管理器里看到内存涨了 200MB，不代表有泄漏——它可能只是渲染层缓存、字体加载或 GPU 纹理占的。真正敏感的指标是 DOM 节点总数是否只增不减。
- 打开 DevTools → Console，执行
$$('*').length记下基线值（比如1247892） - 执行一次闭环操作：打开列表页 → 滚动到底 → 点返回按钮 → 等待 2 秒
- 再执行
$$('*').length，若变成1251346，且重复 3 次后每次+3000+，基本锁定泄漏 - 注意：
document.querySelectorAll('body *').length应与之接近；若差 10 倍以上，说明有大量iframe或 Shadow DOM 干扰，得单独排查它们内部
Performance 面板看 Nodes 曲线，比 JS Heap 更早暴露问题
JS 堆（JS Heap）涨得慢，GC 也可能延迟触发；但 Nodes 曲线是原生 DOM 引用计数，只要节点没被释放，它立刻拉高。
- Performance 面板勾选
Memory和Screenshots - 录制前先手动 GC（点击右上角垃圾桶图标），确保起点干净
- 录制中只做目标操作，避免切 Tab、滚动无关区域干扰曲线
- 停止后重点看灰色柱状图
Nodes：如果每次操作后峰值都比上一轮高，且回落不到基线，就是泄漏铁证 - 别纠结单次操作后没回落——DOM 渲染有延迟，等 1–2 秒再看；但连续 3 次回落失败，就不用犹豫了
Memory 面板拍堆快照，专找 Detached HTMLDivElement 及其保留路径
泄漏节点往往已从文档树移除，却因 JS 引用卡在内存里，表现为 Detached 类型。这是定位根源的唯一可靠方式。
立即学习“前端免费学习笔记（深入）”；
- 拍第一张快照（Snapshot #1），执行疑似泄漏的操作（如加载一个含 5000 条数据的表格）
- 立刻拍第二张（Snapshot #2），切换到
Comparison视图 - 在
Constructor列筛选HTMLDivElement、Text、Comment，看Delta是否为正且数量异常（比如多出 4821 个HTMLDivElement） - 点开任一 Detached 节点，在右侧
Retainers里顺藤摸瓜：若出现Closure → function → (anonymous) → element，说明是事件监听器里的闭包没清理 - 常见陷阱：
window.cacheMap存了已移除的节点；setInterval回调里引用了组件实例；IntersectionObserver实例没调disconnect()
用 AbortController 替代 removeEventListener，尤其防内联函数失效
箭头函数、useCallback 依赖漏写、循环中动态绑定——这些都会让 removeEventListener 失效，监听器永久挂在内存里。
- 不要写：
el.addEventListener('click', () => doSomething())（无法 remove） - 改用：
const controller = new AbortController(); el.addEventListener('click', handler, { signal: controller.signal }) - 卸载时只需
controller.abort()，自动清除所有绑定该 signal 的监听器 - 注意兼容性：
AbortController在 Chrome 88+、Firefox 79+、Edge 79+ 可用，IE 不支持 - 全局监听器（
window.addEventListener('resize', ...)）最容易漏，必须在组件卸载时 abort，不能只靠useEffectcleanup 里的removeEventListener
千万级节点下，任何微小的引用残留都会被指数级放大。最危险的不是你写了多少代码，而是你忘了在哪一行删掉那个 controller.abort() 或 io.disconnect() —— 它可能藏在嵌套的 useEffect 里，也可能在第三方库封装的 hook 底层。动手前先拍快照，动手后必验 $$('*').length，别靠感觉猜。
