DevTools 火焰图
火焰图是 Performance 面板读取主线程任务结构的核心视图，用来判断时间花在脚本、布局、绘制还是其他任务上。
#type / concept
#status / growing
#tech / dev / frontend
#platform / browser
#resource / chrome-devtools
[!info] related notes
- 所属 MOC: DevTools Performance MOC
- 前置概念: Performance 面板
- 并列概念: 长任务调试
- 关系笔记: Performance 面板, 页面卡顿排查路线
DevTools 火焰图
一句话定义
火焰图是把一段时间里主线程做过的工作按时间和调用层级展开的视图。
核心内容
先看什么
- 哪一段最宽，代表占时最长
- 是脚本、布局、绘制还是其他浏览器任务
- 某次用户交互后紧跟着发生了什么
读图直觉
- 横向越宽，说明耗时越长
- 纵向越深，说明调用层级越深
- 要先找最贵的块，再决定是回 Sources、Elements 还是 Network
边界与易混淆点
- 火焰图不是越多信息越好，先抓最长、最异常的部分
- 只看函数名不够，要看它处在什么交互上下文里