核心是借助Chrome DevTools内存分析工具链定位异常分配与泄漏：先拍堆快照看对象分布，再用Comparison视图比对差异找Detached DOM、Closure等新增对象，结合Allocation Timeline追踪实时分配热点，最后用Performance面板和任务管理器验证JS Heap是否持续上升。
监控和分析 JavaScript 堆内存分配，核心是借助 Chrome DevTools 的内存分析工具链，结合对堆结构和 GC 行为的理解，定位异常分配与潜在泄漏。不需要写额外代码就能开始，但需要知道看什么、比什么、停在哪个时间点。
用堆快照（Heap Snapshot）看对象分布
堆快照反映某一时刻 JS 堆中所有可访问对象的完整视图，包括它们的大小、构造函数、引用路径。
- 打开 DevTools → 切换到「内存」面板 → 选择「堆快照」→ 点击「拍摄快照」
- 快照默认从一次垃圾回收后开始采集，确保数据干净；多次拍摄后可在边栏中并排查看
- 重点关注「摘要（Summary）」视图：按构造函数分组，快速识别大量 DOM 节点、闭包、大型数组或自定义类实例
- 点击某构造函数（如 HTMLDivElement 或 CachedData），右侧显示具体实例列表及其保留大小（Retained Size）——这是它阻止 GC 回收的全部内存量
用比较视图（Comparison）找内存增长源头
单个快照只能看静态快照，两个快照之间的差异才能暴露“谁没被回收”。
- 先拍一个基线快照（例如页面加载完成、交互前）
- 执行一段操作（比如打开弹窗、切换 Tab、滚动加载）
- 再拍一个快照 → 在边栏右键该快照 → 「比较」→ 选择基线快照
- 结果中筛选「+」号新增对象，尤其关注 Detached DOM tree（脱离文档但仍被 JS 引用的节点）、Closure（意外保留大对象的闭包）、以及你业务代码中的类名（如 UserCache）
用对象分配记录（Allocation Instrumentation）追踪实时分配热点
当你怀疑某段逻辑频繁创建大对象（如每帧生成新数组、重复解析 JSON），启用分配记录能直接看到“谁在什么时候分配了什么”。
立即学习“Java免费学习笔记（深入）”；
- 在「内存」面板中选择「分配采样器（Allocation sampling）」或「分配时间轴（Allocation instrumentation on timeline）」
- 点击录制 → 执行目标操作 → 停止 → 查看火焰图或表格
- 表格列含：构造函数、分配大小、调用栈。点击调用栈可跳转到源码，精准定位 new XXX() 或 JSON.parse() 等高开销语句
- 注意：该模式有性能开销，仅用于问题复现阶段，不用于线上监控
配合 Timeline 和任务管理器交叉验证
堆快照告诉你“有什么”，Timeline 和任务管理器帮你判断“是否异常”。
- 在「性能」面板录制一段时间的操作，勾选「内存」选项 → 查看 JS Heap 曲线：持续上升不回落，大概率存在泄漏
- 按 Shift+Esc 打开 Chrome 任务管理器 → 观察当前标签页的「JavaScript 内存」列：数值远高于「内存」列（后者含原生对象），说明 JS 堆膨胀严重
- 若发现频繁的 GC 小停顿（Timeline 中黄色小竖条密集出现），说明对象生命周期短、分配压力大，需检查循环创建/销毁逻辑
