监控JS内存需“看趋势、比差异、追引用”：先录时间线查分配模式与Detached DOM；再拍Baseline和操作后快照并强制GC；对比时聚焦(closure)的Retained Size及Retainers；最后通过[[Scopes]]和Dominators定位泄漏源头。
监控 JavaScript 内存并分析 Chrome 堆快照，核心是“看趋势、比差异、追引用”。不是拍一张快照就完事，而是通过有节奏的操作闭环 + 手动 GC + 多快照对比，把异常保留的对象揪出来。
一、先盯住内存变化趋势
打开 Memory 面板 → 选 Allocation instrumentation on timeline → 点击录制按钮 → 做几次典型操作（比如打开/关闭弹窗、切换 tab、滚动加载）→ 停止录制。
- 时间轴上蓝色方块代表新分配对象，悬停可看构造函数和调用栈
- 如果某类对象（如
(closure)或Array）每次操作都稳定出现大量蓝块，说明在重复创建且未释放 - 特别留意标红的 Detached DOM tree：DOM 节点已被移除，但 JS 还拿着引用（比如事件监听没解绑、jQuery 缓存没清）
二、拍快照要讲时机和闭环
快照本身不标记泄漏，关键在怎么拍、怎么比。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 开隐身窗口，禁用扩展，确保环境干净
- 进入 Memory 面板 → 点垃圾桶图标 Collect garbage → 等页面完全空闲（无定时器、无请求、无动画）→ 拍第一张作为 Baseline
- 执行完整操作闭环：例如打开弹窗 → 点关闭 → 等组件卸载完成（React 中 useEffect 清理函数已运行，Vue 中 onBeforeUnmount 已触发）→ 再点垃圾桶强制 GC → 立即拍第二张
三、对比快照重点看 Closure 和 Retained Size
切到 Comparison 视图，选中两张快照做对比，按 # Delta 降序排列。
立即学习“Java免费学习笔记（深入）”；
- 优先关注
Constructor列显示为(closure)且 # Delta 为正、数量明显增长 的项 - 别只看 Shallow Size（几十字节），重点看 Retained Size：一个闭包 Retained Size 达几百 KB 甚至 MB，说明它拽着大量不该存在的对象
- 点开可疑闭包 → 右侧看 Retainers 树：从下往上找最后一层还活着的持有者，常见“钉子”包括：
–window.timerId指向未clearTimeout的定时器
–document.addEventListener绑定后未removeEventListener
– 全局缓存 Map / EventBus 实例
– 第三方库回调闭包仍引用已卸载组件
四、顺藤摸瓜查作用域和支配关系
闭包泄漏的本质是变量生命周期被意外延长。
- 点开闭包对象 → 展开 Properties → 找到 [[Scopes]] → 进入 Closure scope → 查看哪些变量被实际捕获（如
data、config、ref） - 切换到 Dominators 视图，识别谁占了大头：比如某个大型缓存对象或未销毁的根组件实例，阻止了整片内存回收
- 双击可疑对象 → 查右侧 Allocation stack trace（如有），直接跳转到 Sources 面板定位代码行
