根本原因是js仍持有dom节点引用或框架未触发销毁流程，导致节点成为detached dom tree；html不参与回收，实际由js引擎（如v8）负责回收dom节点、事件监听器和闭包等资源。
动态组件切换时，DOM 节点为什么没被回收？
根本原因不是 HTML 写错了，而是 JS 仍持有对节点的引用，或框架/自定义逻辑未触发销毁流程。浏览器只在节点完全脱离 DOM 且无 JS 引用时才可能回收——但 removeChild() 后若变量还存着该节点（比如缓存到 const cache = el），它就变成 Detached DOM tree，持续占内存。
常见现象：滚动列表反复切换组件，Memory 面板里 HTMLDivElement 数量线性上涨，手动 GC 后也不回落。
- 检查是否用
document.querySelector()或闭包捕获了旧节点，却没置为null - 运行
getEventListeners(document.querySelector('.item'))，返回数组长度 > 1 就说明事件监听器重复绑定未解绑 - 执行
console.dir(document.querySelector('.item'))，若输出对象上有__vue或__reactFiber，说明框架组件没走卸载流程
如何避免 disconnectedCallback 成为空摆设？
disconnectedCallback 是 Custom Element 清理资源的最后机会，但它不保证执行——页面刷新、崩溃、标签页后台冻结时都会跳过。不能依赖它做关键清理，更不能在里面操作已脱离 DOM 的节点。
- 所有定时器必须用
this._timer = setTimeout(...)显式保存，并在disconnectedCallback中加 guard 判断：if (this._timer) clearTimeout(this._timer) - 取消 fetch 请求需搭配
AbortController，并在disconnectedCallback中调用controller.abort() - 移除全局监听器必须配对：
window.removeEventListener('resize', this._handleResize)，不能用匿名函数 - 禁止在回调里调用
this.remove()或访问document.body，此时引用可能已失效
大屏场景下，为什么不能靠浏览器自动回收 DOM？
大屏高频刷新卡片、图表、地图标记时，connectedCallback 只在首次挂载触发，滚动中 appendChild() 已存在节点不会再次调用；disconnectedCallback 又不保证执行。每秒创建/销毁数百节点，等于每秒触发数十次 layout + 事件重绑 + 内存抖动。
- 真实限制：低端设备上，200 节点列表每秒更新 10 次，layout 时间飙升 3–5 倍
- 正确做法是节点池化复用：
node.style.display = 'none'而非removeChild()，用Map缓存带dataset.id的节点 - 复用时只更新可变字段：
textContent、dataset、src，禁止增删子节点 - 初始化结构必须固定（如 class 名、子元素 class 名），否则复用后样式或逻辑错乱
HTML 本身不参与垃圾回收，那谁在管？
HTML 是声明式标记，不执行逻辑；真正负责回收的是 JavaScript 引擎（如 V8）。所谓“HTML 垃圾回收分析”，本质是验证你写的 JS 是否让 DOM 节点、事件监听器、闭包变量及时释放。
- 用 Memory 面板录
allocation timeline，看 JS Heap 是否每次操作后都跳升且不回落 - 对比堆快照时筛选
Objects allocated between snapshots，重点盯HTMLDivElement、Closure、EventListener数量是否与操作次数严格一致 - 分片插入大量节点（如每次 50 个）而非单次几千个，避免 GC 飙高导致卡顿或 OOM
- 回收站类功能必须用
localStorage存最小必要信息（id、content、parentSelector），恢复时重建节点并重绑事件，不能拼接innerHTML
Detached DOM tree 就会悄悄堆积，直到某天大屏卡死、管理后台内存爆表。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
