通用对象留存追踪器聚焦长生命周期宿主+闭包持有+大对象引用三角关系，精准监控Detached DOM节点、大型数据结构、组件/上下文实例三类高危对象，通过轻量拦截、DevTools集成与编译期提示实现高效内存泄漏防控。
设计一个通用的对象留存追踪器，核心不是“监控所有闭包”，而是精准识别哪些对象本该被释放却因闭包强引用而滞留——重点盯住 长生命周期宿主 + 闭包持有 + 大对象引用 这个三角关系。
明确追踪目标：只盯三类高危对象
盲目追踪所有闭包会带来巨大开销且无实际意义。应聚焦以下三类极易被闭包隐式持有的对象：
- Detached DOM 节点：已从 document 移除但仍在内存中（如事件监听器未解绑）
- 大型数据结构：数组长度 > 10000、字符串长度 > 50KB、嵌套深度 > 8 的对象
- 组件实例或上下文对象：含 render、setState、useEffect 等方法的 React/Vue 实例，或含 on、emit 方法的 EventEmitter 实例
轻量级拦截机制：不侵入业务，靠引用链反向标记
不重写 Function.prototype，也不代理所有函数创建。采用“被动标记 + 主动快照”策略：
- 在关键挂载点（如
addEventListener、setInterval、emitter.on）打补丁，自动为传入的回调函数打上__trackedByRetainer__标记，并记录其捕获的「可疑变量」（如参数中含 DOM 元素、大数组、this 指向组件实例） - 当对象被显式销毁（如调用
el.remove()、component.unmount()、clearInterval(id)）时，触发检查：若该对象正被任一打标闭包引用，则立即告警并输出 retainers 链路 - 支持手动标记需追踪的目标：
retainer.track(largeData, 'userCache')，后续只要它出现在某闭包作用域中，就纳入预警范围
DevTools 友好集成：直接对接 Chrome Memory 面板
追踪器本身不长期驻留内存，只在调试模式下启用。与 DevTools 协同工作：
- 提供
retainer.takeSnapshot()，生成带标注的 Heap Snapshot：Detached 节点旁标注 “held by closure #123”，闭包对象旁标注 “holds: [userCache, modalRef]” - 支持
retainer.findLeakPath(target)：输入一个 Detached 节点或大对象，返回从 GC root 到它的最短强引用链，例如：
window → myEmitter → listeners[5] → closure → handler → containerEl - 在 Performance 面板中注入自定义 trace event，标记“Closure retention detected”，方便时间轴对齐分析
生产环境降级方案：零运行时开销的编译期提示
上线前通过 Babel 插件静态扫描，识别高风险模式并报错或警告：
- 内联箭头函数绑定事件：
el.addEventListener('click', () => {...})→ 提示改用具名函数或 AbortController - 定时器中直接访问
this.xxx或未解构的大对象属性：setInterval(() => console.log(this.data.items), 1000)→ 建议改为传参或 useRef 快照 - useEffect 依赖数组缺失关键项，且回调中读取了 props/state → 触发 ESLint 规则
react-hooks/exhaustive-deps强制修复
