Firefox DevTools 录制页面性能轨迹方法

先说几个核心判断：用 Firefox DevTools 的 Performance 面板做性能分析，关键不是怎么点按钮，而是怎么录才能拿到靠谱的数据。环境不干净、触发方式不对、分析只看表面——这三条踩中任何一条，录出来的轨迹都容易误导结论。下面一条条拆开说。

打开 Performance 面板很简单：Ctrl+Shift+E（Windows/Linux）或 Cmd+Opt+E（macOS），点击左上角红色圆点开始录制，操作完再点停止，一条完整轨迹就拿到了。但注意，这仅仅是开始——接下来的准备工作、触发方式、分析技巧，才是真正决定结果质量的关键。

确保录制环境干净可信

性能轨迹要反映真实运行状况，而不是被干扰项扭曲的样子。以下几个要点必须到位：

• 用无痕（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 文件，用于归档、团队协作或前后对比：

• 录制完成后，点击右上角 ⋮ → Sa ve analysis data，保存为 .json（例如 profile-v1.json）。建议命名带上版本号和场景。
• 下次打开 Performance 面板，点击 ⋮ → Load analysis data 即可重新载入历史轨迹，方便复现或继续分析。
• 如果想横向对比优化前后效果，导出两个 JSON 文件，人工比对主线程总耗时、长任务数量、内存峰值及 Layout/Paint 次数。这种对比往往比只看单次数据更有说服力。