Performance面板Memory Timeline通过JS Heap等曲线识别内存泄漏，需勾选Memory录制操作、观察阶梯式上升趋势，并结合堆快照定位具体泄漏对象。
在 Chrome DevTools 的 Performance 面板中，Memory Timeline 是追踪 JavaScript 运行时内存变化的直观方式，但它本身不直接“捕获堆快照”，而是展示 JS 堆、文档、监听器、DOM 节点等随时间增长的趋势，帮你快速识别内存泄漏或异常增长。
启用 Memory Timeline 并开始录制
打开 DevTools → 切换到 Performance 面板 → 点击右上角齿轮图标（⚙️）→ 勾选 Memory（确保“JS heap”、“Documents”、“DOM nodes”、“Listeners”等子项已启用）→ 点击左上角录制按钮（●）→ 执行目标操作（如反复打开关闭模态框、滚动加载列表）→ 停止录制。
录制完成后，顶部时间轴下方会出现带颜色图例的内存曲线，蓝色（JS Heap）最常用，反映 V8 堆内存使用量。
观察关键模式：识别潜在泄漏
- 持续单向上升，且不回落：比如执行 10 次相同操作后，JS 堆从 20MB 涨到 120MB，停止操作后仍不下降，高度疑似对象未被回收（如全局缓存未清理、事件监听器未移除、闭包持有 DOM 引用）
-
阶梯式上涨 + 小幅回落：每次操作后堆内存跳升一级，回落幅度小，说明部分对象被保留——检查是否意外保留了 DOM 元素、定时器、或通过
WeakMap外的结构长期引用 -
JS 堆平稳但 DOM 节点/监听器持续增加：说明 DOM 相关资源未释放，重点排查
addEventListener是否漏掉removeEventListener，或组件卸载时未清空document.body.appendChild的临时节点
结合堆快照精确定位泄漏对象
Memory Timeline 只告诉你“涨了”，不告诉你“谁占的”。需配合堆快照深入分析：
立即学习“Java免费学习笔记（深入）”；
- 在 Timeline 中找到内存明显上涨前后的两个时间点（例如操作前 1s 和操作后 2s）
- 切换到 Memory 面板 → 选择 Heap snapshot → 分别录制两次快照
- 对第二次快照点击 Comparison 视图 → 筛选 Objects allocated between Snapshot 1 and 2 → 按 Retained Size 排序，重点关注数量突增且 Retained Size 大的构造函数（如
MyComponent、Array、Object） - 点击可疑构造函数 → 查看右侧“Retainers”面板，逐层展开，找到阻止 GC 的引用链（例如：
window.cache → Map → MyComponent → $element → HTMLElement）
注意常见干扰因素
Memory Timeline 显示的是“已分配但尚未回收”的内存，不代表一定泄漏。以下情况属正常波动：
- V8 的垃圾回收是延迟触发的，手动调用
gc()（仅限chrome://flags/#enable-web-developer-gc开启的调试版）可强制回收，辅助验证 - 图片、WebGL 纹理、大型 ArrayBuffer 不计入 JS 堆（JS Heap），但会占用内存；需用 Rendering 面板的 “FPS Meter” 或任务管理器观察整体进程内存
- 第三方库（如图表库、富文本编辑器）常内部缓存 DOM 或数据，首次初始化后内存跳升属预期行为，关键是后续重复操作是否持续累积
