html不参与垃圾回收，关键在js引擎对dom节点、事件监听器、闭包的回收机制；detached dom、未解绑事件、闭包引用是三大泄漏根源。
HTML 本身不参与垃圾回收，所谓“HTML 垃圾回收面试题”，实际考的是你对 JS 引擎（如 V8）如何回收 DOM 节点、事件监听器、闭包等资源的理解。答错这一点，直接暴露基础盲区。
DOM 节点被移除后内存还在？查 Detached DOM tree
常见错误现象：调用 el.remove() 或 innerHTML = '' 清空容器，但 Memory 面板里 JS Heap 持续上涨，快照中出现大量 HTMLDivElement 条目且状态为 Detached。
- 根本原因不是 HTML 写得不对，而是 JS 仍持有对该节点的引用（比如缓存到
const cache = document.querySelector('.item')，后续没置为null） - 在 Elements 面板右键目标节点 → Break on > subtree modifications，触发移除操作后断点停住，看调用栈里哪个闭包变量还抓着它
- 执行
console.dir(document.querySelector('.item'))，若输出对象上有__vue或__reactFiber属性，说明框架组件未正确卸载，不是你手动写的 HTML 或 JS 的问题，而是生命周期钩子漏了unmount逻辑
事件监听器重复绑定却不解绑？用 getEventListeners() 验证
典型泄漏场景：每次渲染列表都给每个按钮加 addEventListener('click', handler)，但没配对调用 removeEventListener；或用匿名函数绑定，导致无法解绑。
- 运行
getEventListeners(document.querySelector('button'))，返回数组长度 > 1 就是铁证 - 优先用事件委托代替逐个绑定：
container.addEventListener('click', e => { if (e.target.matches('.btn')) {...} }) - 必须单独绑定时，把 handler 声明为具名函数或保存在变量里，确保能传给
removeEventListener
Memory 面板里 JS Heap 不回落？先强制 GC 再比对快照
只看曲线容易误判——JS 引擎不会立刻回收，得主动触发并观察是否真正释放。
- 打开 DevTools → Memory 标签 → 点
Collect garbage（垃圾桶图标），清掉待回收对象 - 拍第一张快照（Baseline）→ 执行一次 HTML 相关操作（如插入 50 个
<div class="card"> 并绑定事件）→ 再点 <code>Collect garbage→ 拍第二张快照 - 筛选器选
Objects allocated between snapshots，重点看Closure、EventListener、HTMLDivElement这几类，数量是否与你操作次数严格一致
真正难的不是看懂标记-清除原理，而是当你面对一个运行半小时后卡死的管理后台页面，得快速判断是 Detached DOM 挂着，还是某个定时器里的 setInterval 闭包偷偷保留了整个数据表引用——这种时候，靠背概念没用，得会用 getEventListeners 和快照比对直击要害。
