运行时快照是定位前端内存溢出最直接、最系统的手段：分阶段拍三张快照建立基准，用Comparison视图聚焦Detached节点/Closure/大数组等增长对象，顺Retaining Path定位强引用者，并结合Allocation Timeline交叉验证泄漏源头。
运行时快照是定位前端内存溢出最直接、最系统的手段。它不依赖猜测，而是用真实内存状态说话——拍下来、比对、追踪引用链，三步就能锁死泄漏源头。
分阶段拍三张快照，建立可比基准
不要只拍一张。系统性排查必须有参照系：
- Snapshot 1（基线）：页面刚加载完成、无任何交互时立即拍摄，作为干净起点
- Snapshot 2（操作后）：执行一次疑似泄漏动作（如打开并关闭一个数据密集型弹窗），立刻拍摄
- Snapshot 3（重复后）：再执行完全相同的操作，再次拍摄
关键在“完全相同”——路径、参数、数据量都要一致，否则对比失去意义。
用 Comparison 视图聚焦增长对象
选中 Snapshot 2 和 Snapshot 3，切换到 Comparison 模式。重点盯这几类：
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
立即学习“前端免费学习笔记（深入）”；
- Detached HTMLDivElement（或其它 Detached 节点）：DOM 已从文档移除，但 JS 仍强引用着，整棵子树锁死内存
- Closure：数量持续增加且 size 偏大，大概率是闭包捕获了未释放的大数组、响应数据或 DOM 引用
- Array / Object / String：非原生构造函数（如 (array)、(object)）大量增长，尤其伴随 size > 1MB，说明原始数据堆积
- System / NativeObject：V8 内部对象异常增长，常指向 Canvas、WebGL 或未释放的 Blob/ArrayBuffer
顺 Retaining Path 找到代码罪魁
点击某条异常增长的条目（比如 Detached HTMLDivElement 数量+42），右侧展开 Retaining Path。这条路径是从 GC Root（如 window、全局变量、定时器回调）到该对象的完整引用链。
从下往上看，找到第一个带 @ 符号的对象（如 @12345678），它就是强持有者。这个 ID 对应快照中某个具体对象，点开它，看它的属性名和上下文 —— 很可能就是：
const chartNode = document.getElementById('chart');
chartNode.remove(); // 但 chartNode 变量没置 null
或
useEffect(() => { const timer = setInterval(...); return () => {}; // 忘了 clearInterval(timer) }
交叉验证：快照 + Allocation Timeline
如果快照对比发现 Closure 持续增长，但找不到明确源头，就回到 Performance 面板，开启 Allocation instrumentation on timeline 录制相同操作。
录制完成后，在火焰图下方时间轴上，把鼠标悬停在内存持续上升的区间，看右侧 “Constructor” 列 —— 它会实时显示那一秒内新分配的对象类型和调用栈。直接定位到哪一行代码 new 了 10 万个对象，或哪次 fetch 成功后把整个响应塞进了 useRef.current。
