allocation timeline 是 chrome devtools 中用于可视化内存分配行为的工具，通过蓝色条形图显示分配时机与规模，结合调用栈定位高频分配及潜在泄漏源头。
Allocation Timeline 是 Chrome DevTools 中用于可视化内存分配行为的重要工具，它能帮你发现哪些代码频繁创建对象、哪些对象长期驻留内存，进而定位潜在的内存泄漏或性能瓶颈。
打开并启动 Allocation Timeline
在 Chrome 中打开 DevTools（F12 或 Ctrl+Shift+I），切换到 Memory 面板。选择 Allocation timeline 模式（不是 “Heap snapshot” 或 “Allocation instrumentation on heap”），点击左上角的录制按钮（●）开始捕获。执行你想分析的操作（比如点击按钮、滚动页面、加载数据），再点击停止按钮结束录制。
识别高频分配热点
时间轴中垂直的蓝色条形代表某一时刻发生的内存分配，高度反映该时刻分配的字节数，宽度对应持续时间。重点关注：
- 密集、连续出现的蓝色条 —— 表示短时间内大量对象被创建，常见于循环、高频事件回调（如 scroll、mousemove）或重复渲染逻辑
- 长时间未释放的高条 —— 可能意味着对象被意外保留（如闭包引用、全局缓存未清理、事件监听器未移除）
- 与 JS 执行堆栈联动：点击某一段蓝色区域，右侧会显示此时的调用栈，直接定位到 new Object()、Array、Promise、闭包等具体分配位置
结合代码定位问题源头
在调用栈中逐层展开，找到你自己的源码行。常见可优化场景包括：
- 在 render 函数中每次返回新数组或新对象（如
map(() => ({}))），导致不必要的对象分配 - 定时器或事件监听器内反复创建函数或配置对象，且未复用
- 缓存逻辑未做大小限制或过期清理，导致 Map/Set 持续增长
- 使用 class 实例但未显式销毁关联资源（如 canvas context、WebSocket、定时器）
确认问题后，可通过对象复用（Object.assign、池化）、延迟初始化、弱引用（WeakMap）、及时解除引用等方式减少分配压力。
对比不同操作下的分配模式
可多次录制：一次正常流程，一次触发疑似泄漏的操作（如打开关闭弹窗多次），对比两者 Allocation Timeline 的差异。若某类对象（如 Closure、Array、CustomClass）在重复操作后持续累积且不回落，就高度提示存在泄漏路径。注意关闭所有无关标签页和扩展，避免干扰。
它不直接告诉你“哪里泄漏了”，但能清晰暴露“哪里在疯狂分配”以及“谁在背后调用”。抓住分配高峰 + 调用栈，就能快速缩小排查范围。
