chrome memory面板抓detached dom+closure链：先稳定复现操作并拍两份堆快照，comparison视图筛选detached节点，再通过retainers反向追踪含closure的引用链，确认其捕获dom变量及未清理逻辑。
Chrome Memory 面板怎么抓 Detached DOM + Closure 链
Detached DOM 节点持续不回收，是 HTML 异步更新泄漏最典型的信号。关键不是看“有没有 Detached”，而是看它是否随操作次数线性增长。
操作路径必须严格：打开弹窗 → 执行异步内容加载（如 hx-swap、innerHTML = response、React setState）→ 关闭弹窗 → 等待 2 秒 → 拍 Heap Snapshot。重复 3 次以上，切 Comparison 视图，筛选 Detached HTMLDivElement 或 Detached HTMLIFrameElement。
- 若数量从 1 → 3 → 6 → 9 稳定上升，基本锁定泄漏；若每次都是 0 或 1 且不累积，大概率无问题
- 点开任一 Detached 节点，看 Retainers 列表：出现
Closure → function → (anonymous) → element链路，说明闭包正 hold 住这个已脱离的 DOM - 再点进那个
(closure)对象，看 Retained Size 和谁在持有它——常见的是window、document、某个全局emitter实例，或 React 的fiber根节点
为什么 removeEventListener 失效？箭头函数和内联写法是主因
异步更新后 DOM 被替换，但旧监听器没被移除，根源常出在函数引用不一致上。浏览器认为 () => {} 是全新函数，跟之前绑定的不是同一个对象。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- ❌ 错误写法：
el.addEventListener('click', () => { doSomething(); });—— 每次都生成新函数，removeEventListener找不到原引用 - ✅ 正确写法：
const handler = () => { doSomething(); }; el.addEventListener('click', handler); el.removeEventListener('click', handler); - React 函数组件中，
useCallback必须写全依赖项，漏写[props.id]就会导致每次渲染都生成新函数，清理失效 - HTMX 场景下，避免用
hx-on绑定匿名函数；改用具名函数 + 手动解绑，或加{ once: true }明确声明一次性
iframe 在异步弹层里怎么清理才真正释放内存
只调 iframe.remove() 或设 src = ""，现代浏览器里大概率残留 HTMLIFrameElement 和 Detached HTMLDocument。IE 更苛刻，必须走完整卸载流程。
- IE 必须先设
iframe.src = "about:blank"，再用requestAnimationFrame或setTimeout(() => { ... }, 0)延迟执行后续动作 - 延迟后执行：
iframe.contentWindow?.document.write("")→iframe.contentWindow?.close()→iframe.remove() - 现代浏览器仍需检查：父页面是否缓存了
iframe.contentWindow引用；是否注册了window.addEventListener('message', handler)却没在卸载时removeEventListener - 第三方脚本（如埋点 SDK）可能在 iframe 内自动注入并长期驻留，需确认其 unload 生命周期钩子是否触发
大型项目里哪些“看起来安全”的代码其实埋着泄漏点
很多写法在单测或简单场景下完全正常，但进入高频异步更新、反复开关组件的生产环境，就会暴露引用链未切断的问题。
-
IntersectionObserver和ResizeObserver实例必须显式调用.disconnect()，不能只靠作用域结束；封装类若没暴露destroy方法，就等于默认泄漏 -
setTimeout回调里直接读this.state或store.getState()，等于把整个组件实例锁在闭包里；应改用useRef存快照值，或传参带出必要字段 - 使用
AbortController时，fetch请求被 cancel 后，响应体（尤其是大文件流）可能仍在解析中；需确保response.body?.cancel()被调用 - Vue 3 的
onBeforeUnmount或 React 的useEffect清理函数，若内部变量定义在回调里（如const id = setInterval(...)），外部无法清除，必须提到作用域顶层
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
