Firefox DevTools 如何录制页面性能轨迹

Firefox Performance面板录制需确保环境干净：用无痕窗口、禁用HTTP缓存、启用CPU节流、关闭干扰程序；按场景选择刷新页面（加载）或手动录制（运行时），勾选Screenshots辅助定位，录制后通过FPS、火焰图、Marker和Web Vitals分析并导出JSON复用。

直接按 Ctrl+Shift+E（Windows/Linux）或 Cmd+Opt+E（macOS）打开 Firefox DevTools 的 Performance 面板，点击左上角红色圆点开始录制，执行操作后点击停止即可获得完整性能轨迹——关键不在“怎么点”，而在“怎么录才准”。

确保录制环境干净可信

性能轨迹反映的是真实运行状况，干扰项会扭曲结果：

• 用无痕（InPrivate）窗口打开页面，避免扩展、缓存或登录态影响
• 在 DevTools 设置中勾选 Disable HTTP Cache，确保每次都是首次加载资源
• 如需模拟低端设备，手动启用 CPU 节流（如 4x slowdown），路径：设置 → Performance → Enable CPU throttling
• 关闭其他标签页和后台程序，减少系统资源竞争

选择合适的录制触发方式

根据你要分析的场景，决定如何启动录制：

• 分析页面加载性能：点击 Performance 面板顶部的 刷新页面 按钮（带循环箭头图标），DevTools 会自动刷新并全程捕获从导航开始到 load 事件完成的过程
• 分析交互运行时性能：点击 Start Recording，再手动执行目标操作（如滚动、点击、表单提交），完成后点击 Stop Recording
• 需要截图辅助定位：录制前勾选右上角 Screenshots 复选框，每帧生成截图，便于对照视觉卡顿位置

录制后快速定位关键帧与事件

停止后生成的时间轴不是看热闹，而是找线索：

• FPS 图表中出现黄色/红色条？说明该时段掉帧，往下拉时间轴，主线程瀑布图里对应位置必有长任务或密集 Layout/Paint
• 想查某次点击为何延迟？在时间轴上方拖选该操作发生的时间段，右键 → Zoom to selection，聚焦分析
• 标记关键节点：点击时间轴空白处，输入文字添加自定义 Marker（如 “LCP element painted”），方便后续比对
• 右侧 Summary 面板会自动汇总 FCP、LCP、INP 等 Web Vitals 数值，但需结合下方火焰图确认成因

导出与复用轨迹数据

轨迹数据可保存为 JSON 文件，用于归档、协作或对比：

• 录制完成后，点击右上角 ⋮ → Save analysis data，保存为 .json（例如 profile-v1.json）
• 下次打开 Performance 面板，点击 ⋮ → Load analysis data 即可重新载入历史轨迹
• 若要横向对比优化前后效果，导出两个 JSON 文件，人工比对主线程总耗时、长任务数量、内存峰值及 Layout/Paint 次数