dom与javascript对象互相引用会形成强引用闭环，导致垃圾回收器无法释放内存，尤其在老版ie中因引用计数与标记清除机制不兼容而严重；现代浏览器虽改进，但闭包持有大对象仍可能引发泄漏，需手动断开引用或用weakmap、显式解绑事件等方法预防。
DOM 与 JavaScript 对象互相引用，会形成强引用闭环，让垃圾回收器（GC）无法判定这些对象“不可达”，从而长期滞留内存，造成泄漏。
这种泄漏不是所有浏览器都一样严重——老版本 IE（6–8）最典型，因为它底层用 COM 组件管理 DOM，采用引用计数机制；而 JS 引擎用的是标记清除。两者不兼容，一遇到双向持有，引用计数永远不为 0，对象就永远不释放。
现代浏览器（Chrome、Firefox、Edge）已基本改用统一的标记清除 GC，能处理多数循环引用。但若闭包中还持有了大对象（如组件实例、大量缓存数据），整个引用链仍会被“锚定”住，导致延迟释放甚至真实泄漏。
典型互引用结构长这样
const el = document.getElementById('box');
const obj = {
element: el
};
el.jsObject = obj; // DOM 持有 JS 对象
此时：
-
obj→el（JS 持 DOM） -
el.jsObject→obj（DOM 持 JS）
GC 根节点（如 window）出发，能顺着 obj 到 el，也能顺着 el.jsObject 回到 obj，整条链始终“可达”，无法回收。
常见高危写法
-
封装类中双向绑定
function Controller(el) { this.el = el; el.controller = this; // DOM 上挂 JS 实例 } -
事件回调隐式捕获
this或elconst handler = () => { console.log(this.el); // this 是 Controller 实例，el 被闭包捕获 }; el.addEventListener('click', handler); -
匿名函数 + DOM 属性赋值
el.onclick = function() { doSomething(el); // el 被函数作用域捕获，同时 el 又持有该函数 };
怎么切断这个环？
-
销毁时手动断开任一端引用
// 卸载前 el.controller = null; obj.element = null;
-
避免在 DOM 上挂 JS 对象 改用
WeakMap存状态，键是 DOM 元素，值是关联数据：const stateMap = new WeakMap(); stateMap.set(el, { count: 0 }); // el 被移除后，WeakMap 自动丢弃对应条目 -
事件监听器用命名函数 + 显式解绑
function handleClick() { /* ... */ } el.addEventListener('click', handleClick); // 销毁时 el.removeEventListener('click', handleClick); 不用
attachEvent（IE 专有） 它容易导致监听器无法被正确清理，且与闭包结合后更难追踪。
关键判断点
打开 Chrome DevTools → Memory 面板 → 拍摄堆快照（Heap Snapshot）→ 搜索 Detached DOM tree 或筛选 closure → 看 Retainers 链是否出现 element → closure → element 这类闭环路径。
只要看到 DOM 节点被 JS 闭包持有，同时该节点又反向持有闭包（或其所属对象），基本就是互引用泄漏了。
不复杂但容易忽略
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
