DOM引用未清理会导致内存泄漏，因为JS引擎依赖可达性判断垃圾回收，即使DOM节点已从文档移除，只要被JS变量显式引用（如let btn = document.getElementById('submit')），该节点及其子树仍无法被回收。
DOM 引用未清理会造成内存泄漏，是因为 JavaScript 引擎的垃圾回收机制依赖“可达性”判断：只要一个 DOM 节点被 JS 变量显式引用着，即使它已从文档中移除（removeChild 或 innerHTML = ''），该节点及其子树仍被视为“活跃对象”，无法被回收。
为什么移除了 DOM 还占内存？
常见误解是“删了 HTML 就等于释放了内存”。但真实情况是：
- JS 变量（如
let btn = document.getElementById('submit')）持有对 DOM 元素的强引用 - 即使调用
document.body.removeChild(btn)，只要btn变量还存在，该元素就仍在内存中 - 如果这个 DOM 元素上还绑定过事件监听器、自定义属性或关联了大型数据（比如
btn.cache = bigData），这些都会一并滞留
典型泄漏场景
以下代码看似无害，实则埋下隐患：
let modal = document.getElementById('user-modal');
// 用户关闭弹窗时
function closeModal() {
document.body.removeChild(modal); // ✅ DOM 已移除
// ❌ 但 modal 变量仍指向原节点，且可能还有：
// - modal.addEventListener('click', handler)
// - modal.dataset.userProfile = hugeObj
}正确清理方式
关键不是“只删 DOM”，而是“切断所有 JS 层引用”：
-
手动置 null：移除后立即将变量设为
null，断开引用链document.body.removeChild(modal);<br>modal = null;
-
移除事件监听器：在清理前调用
removeEventListener，尤其注意匿名函数无法移除，应使用具名或AbortControllermodal.removeEventListener('click', handleClick); - 避免缓存 DOM 到长生命周期对象中：比如不把元素存进全局配置对象、类实例属性或闭包中，除非明确需要且有配套清理逻辑
更安全的实践建议
推荐组合策略，降低疏漏风险：
- 用局部作用域声明 DOM 变量（如在函数内用
const），自然随作用域销毁而释放引用 - 组件化开发中，在卸载钩子（如 React 的
useEffect cleanup、Vue 的beforeUnmount）里统一清理 DOM 引用和监听器 - 对动态创建/销毁频繁的模块，可封装清理函数：
function detachAndClean(el) {<br> if (el && el.parentNode) el.parentNode.removeChild(el);<br> el?.removeEventListener?.('click', handler);<br> el = null;<br>}
