Chrome DevTools Memory面板用于识别内存泄漏，通过Heap Snapshot对比、Allocation Timeline监控和手动GC验证三步定位问题，重点关注闭包、Detached DOM及未清理的事件监听器等泄漏源。
直接看内存使用情况，关键不是“占了多少”，而是“为什么占着不放”。Chrome DevTools 的 Memory 面板就是干这个的，重点在识别内存泄漏和不合理保留。
快速抓取内存快照（Heap Snapshot）
打开 DevTools → Memory 标签 → 选中 “Heap snapshot” → 点击左上角录制按钮（●）。操作页面（比如打开弹窗、加载列表、切换 tab），再点停止。会生成一份当前 JS 对象堆的完整快照。
- 多次对比快照更有效：比如操作前拍一张，操作后拍一张，再操作一次再拍一张，用“Comparison”视图看新增/未释放的对象
- 重点关注 constructor 名称带 “(closure)”、“Array”、“Object” 但数量异常增长的项
- 点击某构造函数 → 右侧看 “Retainers”（谁在引用它），顺着引用链往上查，常能发现闭包意外捕获了 DOM 或大数组
监控内存变化趋势（Allocation instrumentation on timeline）
这个模式适合观察“边用边涨”的问题。选中 “Allocation instrumentation on timeline” → 开始录制 → 做交互 → 停止。时间轴上会显示每秒新分配的对象大小和类型。
- 蓝色小方块代表新分配对象，悬停可看构造函数和堆栈
- 如果滚动或定时器触发后，持续出现大量相同类型的蓝块（比如每次滚动都 new 一个大 Object），说明可能在重复创建没清理的资源
- 注意标红的 “Detached DOM tree” —— 这是常见泄漏源：DOM 节点被移除但 JS 还持有引用（比如事件监听器没 off、缓存里存着 jQuery 对象）
检查是否真有泄漏（Collect garbage + repeat）
别只信数字。每次拍完快照后，手动点左上角垃圾回收图标（垃圾桶 ?️），再拍一张。如果某类对象在 GC 后仍不减少，且随操作稳定增长，大概率是泄漏。
立即学习“Java免费学习笔记（深入）”；
- 典型泄漏场景：全局变量缓存数据但没清理；addEventListener 没对应 removeEventListener；定时器（setInterval）没 clear；闭包中引用了本不该长期持有的大对象
- React/Vue 项目要额外留意：useRef / ref 持有 DOM、自定义 Hook 中未销毁的订阅、setState 闭包捕获过期状态
基本上就这些。不用每次都全功能开一遍，先跑个快照看 retainers，再配合 timeline 找规律，最后手动 GC 验证 —— 三步下来，80% 的内存问题能定位到根儿上。
