火焰图是识别JavaScript性能热点最直观的可视化工具，宽度表示函数耗时占比，纵向堆叠反映调用栈深度，横向排列区分宏任务，并需结合Summary栏归因分析。
火焰图是识别 JavaScript 运行时性能热点最直观、最有效的可视化工具。它不依赖猜测，而是基于真实采样数据，把“时间花在哪”变成一眼可辨的图形。
看懂火焰图的三个核心结构
火焰图不是装饰，每个视觉特征都对应关键信息：
- 宽度 = 函数耗时占比：越宽的色块，说明该函数在采样期间被 CPU 执行的时间越长。比如一个占满整行宽度的函数，大概率就是同步阻塞元凶。
- 纵向堆叠 = 调用栈深度：从上到下是调用顺序（顶部是入口，底部是叶子函数），嵌套越深，说明调用链越复杂；若某一层突然变宽+变深，往往意味着该层级存在高频或低效递归/循环。
- 横向排列 = 并行任务分隔：每个顶层色块通常对应一个宏任务（如一次 click 回调、setTimeout 回调），它们彼此异步，不互相阻塞。但若某个宏任务下的色块异常宽长，就说明它内部存在耗时操作，拖慢了整个任务响应。
重点关注这四类典型热点模式
实际分析时，不用通读全图，直接扫描以下高风险形态：
- “长条型”宽块：单个函数横向铺开，几乎贯穿整个时间线——大概率是未拆分的同步计算（如大数据遍历、正则匹配、JSON.parse 大字符串）。
- “塔状”深堆叠：多个函数层层嵌套、高度一致且宽度集中——常见于低效递归、重复创建对象、或框架内部过度代理（如 Vue 响应式 getter 嵌套过深）。
- “锯齿状”高频窄条：同一函数反复出现、每次都很窄但密度极高——可能是事件监听器未节流（如 scroll、input）、或 Promise 链中频繁微任务调度。
- “悬浮孤岛”：顶部没有父级、独立存在的宽块——往往是未被捕获的异步入口，比如 setTimeout/setInterval 回调、Web Worker 消息处理，或是第三方 SDK 的定时上报逻辑。
结合 Summary 栏做归因判断
Chrome DevTools Performance 面板右上角的 Summary 栏提供关键上下文，避免误判：
立即学习“Java免费学习笔记（深入）”；
- 如果 Scripting 占比持续 >50%，说明瓶颈确实在 JS 执行本身，优先查火焰图中的宽块函数。
- 如果 Rendering 或 Painting 占比高，但 Scripting 不高，说明问题不在 JS 逻辑，而在样式变更、强制同步布局（
offsetTop等）、或大量 DOM 插入——此时火焰图里可能看不到明显宽块，要切到 Layout / Paint 时间线进一步定位。 - 若出现大量 Garbage Collection 条目，且紧随大块 JS 执行之后，提示内存分配激增，需检查是否在循环中新建对象、闭包持有大对象、或未清理事件监听器。
快速验证与收敛技巧
发现可疑函数后，别急着重写，先做最小化验证：
- 用
performance.mark()和performance.measure()在该函数前后打点，确认实测耗时是否与火焰图宽度匹配。 - 临时注释或替换该函数逻辑（例如用空 return、mock 数据），重新录制火焰图，观察宽块是否消失、Scripting 占比是否下降。
- 对疑似高频调用函数，加一行
console.count('funcName')，确认调用频次是否超出预期。
