Performance面板录制后需聚焦火焰图分析：顶部概览曲线、中间多线程火焰图（红竖条表掉帧），按颜色识别任务类型；定位FCP/LCP/TTI关键节点；下钻长任务查强制同步布局等瓶颈；优化后需相同条件下对比 recordings。
打开 Performance 面板后点击录制，页面加载或交互完成后停止，就能得到一份性能记录——关键不是“有没有数据”，而是看懂它在说什么。
看清时间轴和主视图结构
记录生成后，顶部是 FPS、CPU、NET、内存等概览曲线；中间火焰图（Flame Chart）是核心，每一行代表一个线程（主线程、渲染器、合成器等），每一块彩色条代表一项任务，宽度对应耗时。鼠标悬停可查看详细信息，如函数名、开始/结束时间、执行时长。
- 红色竖条表示掉帧（低于60fps），优先检查对应时间段的主线程长任务
- 蓝色区域通常是网络请求（Network），绿色是HTML解析与DOM构建，紫色是样式计算与布局，黄色是绘制，橙色是合成
- 主线程上连续高耸的黄色/紫色块，往往意味着重绘重排频繁或JS执行过久
聚焦关键阶段：从加载到可交互
用左上角的“Capture settings”确保勾选了 Screenshots 和 Memory，再用“Reload page and record”自动捕获完整加载流程。然后拖动时间轴，定位几个关键节点：
- FCP（首次内容绘制）：看绿色竖线，往前追溯哪些资源阻塞了它（比如未加 async 的JS、未预加载的关键CSS）
- LCP（最大内容绘制）：找到最晚绘制的大元素（常是首屏图片或标题），检查是否缺少尺寸属性、未启用懒加载或CDN未生效
- TTI（可交互时间）：看主线程何时持续空闲超5秒，中间若被长任务打断（>50ms），就要拆解或延迟执行
揪出具体瓶颈：从火焰图下钻
在火焰图中点击任一长任务（比如一个持续80ms的“Evaluate Script”），下方Summary面板会显示调用栈。重点关注：
- 是否有强制同步布局（Forced Synchronous Layout）？比如 JS 中先改样式又立刻读 offsetTop —— 这会触发同步回流
- 是否存在重复样式计算？比如循环里多次修改 class 又读 getComputedStyle
- 绘制区域是否过大？Paint 区域覆盖整屏但只动了一个按钮，说明没合理使用 will-change 或图层分离
对比验证优化效果
不要只录一次。每次改完代码，用相同条件（无痕模式 + Disable cache + Fast 3G）重新录制，把新旧记录并排放在底部的“ recordings ”栏里。直接横向比对：
- 主线程总忙时长是否下降
- FCP/LCP 时间是否提前
- 长任务数量和单次时长是否减少
- 掉帧段是否变短或消失
不复杂但容易忽略：真正有用的分析，从来不是看整张图多炫，而是锁定1–2个最刺眼的长条，顺着调用链找到那一行JS或那个CSS规则，改掉它，再测一次。
