Chrome DevTools 怎么利用内存快照分析对象占用-js教程-PHP中文网

retained size 表示对象及其引用链占用的总内存，真正阻碍内存释放的是引用关系而非对象大小；通过两次堆快照对比、retainers 分析、dominators 视图和 allocation timeline 可精准定位内存泄漏源头。

chrome devtools 怎么利用内存快照分析对象占用

直接看 Retained Size，它告诉你一个对象连带它“拽着”的所有其他对象一共占了多少内存。真正卡住内存释放的，往往不是对象本身有多大，而是谁在引用它、这条链是否该存在。

拍两次快照再对比

先用隐身窗口打开页面，禁用所有扩展，确保环境干净。按 F12 打开 DevTools，切到 Memory 面板，选 Heap Snapshot，点 Take snapshot 拍第一张（Baseline）。然后执行疑似泄漏的操作（比如反复打开关闭弹窗、触发多次 API 请求），中间手动点垃圾桶图标触发 GC，再拍第二张。进入 Comparison 视图，选这两个快照做对比，按 # Delta 降序排列——重点盯数量或 Retained Size 明显增长的项。

Detached HTMLDivElement：DOM 节点已从页面移除，但 JS 还拿着它
(closure)：闭包可能捕获了大数组、组件实例或整个响应数据
Array 或 Object 的 Retained Size 突然飙高（比如几 MB）：大概率是缓存没清或监听器漏解绑

点开可疑对象看 Retainers

在 Comparison 或 Summary 视图里点中一个异常项，右侧自动展开 Retainers 面板。这里显示的是“谁在引用它”，路径是自下而上：最底下是 GC Root（比如 window、定时器回调、事件队列），往上是一层层持有者，最顶上是你选中的对象。关键不是看链有多长，而是看中间某一层是否本该销毁却还活着。

剪映

一款AI视频创作工具，主要用于一款全能易用的桌面端剪辑软件，适合需要提升相关任务效率的用户。

下载

已卸载的 React 组件仍被 eventBus 回调闭包持有
removeChild 后的节点还被变量 lastClickedNode 引用
window.timerRef 指向一个没 clearTimeout 的定时器，它又拽着一个闭包和大数组

用 Dominators 视图找“真凶”

回到 Memory 面板，左上角下拉菜单选 Dominators（不是 Summary 或 Containment）。它不展示物理引用，而是告诉你“谁一消失，下面一大片就能跟着回收”。默认按 Retained Size 降序排，前几行就是重点——跳过 window、document 这类顶层宿主，聚焦 (closure)、Detached DOM、你项目里的类名（如 ApiCache、ChartView）。

双击某行，右侧展开 Retaining Tree，看它具体支配了哪些对象（比如 Map 缓存、一堆 Detached 节点）
右键 → Reveal in Summary view，跳过去查同类对象总实例数，确认是不是越积越多
如果一个闭包 Retained Size 占整堆 30%，但它只服务一个已隐藏的面板，基本就是泄漏源头

结合 Allocation Timeline 看“活没活够”

切到 Memory 面板，选 Allocation instrumentation on timeline，点 Start，操作页面后 Stop。蓝色条代表分配了但没被回收的内存。点击某个蓝条，右侧会显示当时分配的对象构造函数和堆快照——能帮你定位到哪段代码生成了大量短命却滞留的对象，比如高频 await 操作后堆积的 PromiseReaction 或 Microtask。