$$('*').length 持续线性增长是 DOM 泄漏的铁证；需对比操作前后该值变化，若每次稳定增加超 200 且 Detached 节点持续存在，结合 Retainers 分析闭包持有链，即可定位泄漏源。
$$('*').length 持续上涨就是泄漏铁证
别看任务管理器内存数字，那只是干扰项。真正要盯的是 DOM 节点总数是否随操作线性增长——这是动态注入 HTML 后碎片化泄漏最硬的信号。
打开 DevTools Console，执行 $$('*').length 记下基线（比如 8421）；执行一次闭环操作（如点击按钮注入一段含 50 个 div 的 HTML）→ 等 1 秒 → 再跑一次 $$('*').length。若变成 8479，重复三次后数值稳定 +50、+58、+52，基本锁定泄漏。
- ⚠️ 注意：
document.querySelectorAll('body *').length不计入 Shadow DOM 和 iframe 内节点，而$$是 DevTools 原生 API，结果更真实 - 若差值每次都在 100 以内，大概率是正常渲染缓存；超过 200 就得深挖
- 特别警惕富文本编辑器、Markdown 渲染器、HTMX
hx-swap场景——它们常在未清理旧容器的情况下直接innerHTML = newHtml
Detached HTMLDivElement 在 Comparison 视图里成批出现
节点数涨了，说明有东西没被释放。Memory 面板拍两张堆快照：Snapshot #1（注入前），Snapshot #2（注入并移除容器后 +2s），切到 Comparison 视图，筛选 HTMLDivElement 或 Text 构造器。
如果 Delta 列显示 +472 个 HTMLDivElement，点开任一 Detached 节点，右侧 Retainers 里出现 Closure → function → (anonymous) → element 链路，说明闭包还在 hold 已脱离的 DOM。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 常见源头：
el.addEventListener('click', () => {...})这种箭头函数每次都是新引用，removeEventListener找不到原函数 - HTMX 场景下，
hx-on="click:handler"若handler是内联定义，也会复用失败 - React 中未用
useCallback包裹事件处理器，或漏写依赖项（如[props.id]），导致每次渲染都生成新函数
innerHTML = '' 不等于节点释放
很多人以为清空容器就万事大吉，其实 container.innerHTML = '' 只是断开子节点与父节点的连接，若这些节点还被 JS 引用着（比如闭包、全局 Map、WeakMap 键名），它们就变成 Detached 状态卡在内存里。
- ✅ 正确做法：先移除监听器（用具名函数 + 显式
removeEventListener），再清空内容，最后确保没有变量持有这些节点引用 - ❌ 错误模式：
const map = new Map(); map.set(node, state); container.innerHTML = '';——node还在map里，GC 不会动它 - ? 替代方案：改用
WeakMap存状态映射（weakMap.set(node, state)），节点被移除后自动解绑 - 特别注意 iframe 动态注入：仅
iframe.remove()或设src = ""不够，现代浏览器仍残留Detached HTMLIFrameElement和Detached HTMLDocument
DocumentFragment 用错反而放大泄漏风险
DocumentFragment 本身不占内存，但它常被误当成“安全缓存区”。一旦你在 fragment 插入节点后，又把它和外部大对象（如整行数据、组件实例）一起闭包捕获，整个树就锁死了。
- ⚠️ 典型错误：
const frag = document.createDocumentFragment(); frag.appendChild(clonedNode); // 后续在闭包里长期持有 frag—— 即使没插入 DOM，节点也因闭包无法 GC - 避免在 fragment 创建过程中调用
node.offsetHeight或getBoundingClientRect()，这会强制 flush 渲染队列，提前触发重排并隐式保留布局引用 - 批量插入后，若节点需后续交互，务必绑定轻量回调：不要
() => doSomething(data)，改用() => doSomething(data.id)或从event.target.dataset查找 - 对比
innerHTML：纯静态 HTML 字符串且无事件绑定时，innerHTML更快更省内存；但涉及用户输入、富文本或需保留节点引用时，innerHTML可能解析出不可控 script 标签，引发额外 DOM 和闭包泄漏
最易被忽略的点是：泄漏往往不出现在注入那一刻，而出现在“移除”之后。你检查了插入逻辑，却没验证销毁路径是否真正切断所有引用链——尤其是第三方插件、全局缓存、定时器回调里的隐式持有。
