检测 detached dom 导致的内存泄漏，核心手段是结合 chrome devtools 的 memory 面板进行 heap snapshot 对比，并配合 js 堆栈分析定位残留引用。具体做法是在应用运行前后分别截取两次堆快照，利用内置的 comparison 功能筛选出在第二次快照中存在但第一次不存在的节点（即 detached dom elements），从而确认泄漏对象及其引用链。
如何通过 Heap Snapshot 对比识别 Detached DOM
通过对比两个时间点的堆快照，可以直接筛选出脱离文档树但仍被 JavaScript 引用的 DOM 节点。操作时需在 Memory 面板选择 Take Heap Snapshot，在应用执行特定交互或清理逻辑前记录一次，执行后再次记录，随后在 Comparison 模式下查看新增的对象。
const container = document.getElementById('app');
// 模拟创建大量 DOM 节点
function createNodes(count) {
const fragment = document.createDocumentFragment();
for (let i = 0; i < count; i++) {
const div = document.createElement('div');
div.textContent = `Node ${i}`;
// 错误示范：将 DOM 引用存储在闭包或全局变量中
window.nodeRefs = window.nodeRefs || [];
window.nodeRefs.push(div);
fragment.appendChild(div);
}
container.appendChild(fragment);
}
// 模拟移除 DOM，但未清除 JS 引用
function removeDOM() {
container.innerHTML = '';
// 此时 DOM 已从文档树移除，但 window.nodeRefs 仍持有引用
}
预期结果：调用 removeDOM 后，container 内的 DOM 元素不再存在于 document 树中，但在 Heap Snapshot 的 Comparison 视图中，这些元素会显示为 Detached 状态，且其 Retainer 路径指向 window.nodeRefs 数组。
立即学习“Java免费学习笔记（深入）”；
如何验证 Detached DOM 是否导致内存持续增长
通过录制 Allocation Timeline 或持续监控 Heap Size 曲线，可以观察内存是否随页面交互线性增长且不回落。若发现内存峰值随每次操作累积，且 GC 无法回收相关内存块，则极大概率存在 Detached DOM 引用。
// 验证脚本：在控制台执行多次操作并观察内存
function leakTest() {
console.time('leak-test');
for (let i = 0; i < 100; i++) {
createNodes(50); // 每次创建 50 个节点
removeDOM(); // 移除 DOM，但保留 JS 引用
}
console.timeEnd('leak-test');
// 手动触发 GC（需开启 --expose-gc）
if (window.gc) window.gc();
// 检查 window.nodeRefs 长度，应始终为 5000
console.log('Ref count:', window.nodeRefs.length);
}
预期结果：执行 leakTest 后，Chrome 任务管理器中该标签页的 JS 堆内存显著增加，且 window.nodeRefs 数组长度随循环次数累加，证明 Detached DOM 对象未被垃圾回收。
当 Detached DOM 包含事件监听器时如何排查
若 Detached DOM 节点上绑定了未移除的事件监听器，即使切断其他引用，监听器所在的闭包仍可能持有对节点的引用，形成循环引用导致泄漏。排查时需重点检查 Retainer 路径中是否存在 <anonymous></anonymous> 或 EventListener 类型的节点。
