firefox devtools 不支持自动对比两次录制，但可通过规范流程手动完成性能对比：统一禁用缓存、关闭干扰插件、固定网络与交互路径；导出 json 报告后，比对主线程耗时、长任务、web vitals、内存峰值及重排重绘频次，并结合 network 面板分析请求耗时差异。
Firefox DevTools 本身不提供内置的“自动对比两次录制”的功能，但可以通过手动操作完成有效的页面性能对比测试——关键在于规范录制流程、统一环境条件，并借助时间轴和指标视图做逐项比对。
准备一致的测试环境
确保每次测试起点相同，避免缓存、网络波动或后台干扰影响结果：
- 打开 DevTools 后，进入 设置（F1 或 Ctrl+Shift+O） → 勾选 “禁用 HTTP 缓存”，模拟首次访问场景
- 关闭其他标签页和扩展程序，尤其禁用广告拦截、脚本注入类插件
- 若需模拟弱网，可在 Network 面板 → 网络限速下拉菜单 中选择 3G 或自定义带宽
- 保持页面 URL、用户交互路径（如点击顺序、滚动位置）完全一致
分次录制并保存数据
Firefox 的性能分析器支持导出 JSON 格式报告，这是对比的核心依据：
- 按 Ctrl+Shift+E 打开性能分析器（或通过菜单：工具 → Web 开发者 → 性能）
- 勾选 “启用 JavaScript 分析器” 和 “包含内存分配”（如需查内存增长）
- 点击 开始录制 → 刷新页面（或执行目标操作）→ 停止录制
- 录制完成后，点击右上角 ⋮ → “保存分析数据”，导出为
.json文件（例如before.json和after.json）
人工比对关键指标
打开两次录制的报告，聚焦以下可量化维度进行横向对照：
- 主线程总耗时：在“调用栈”视图顶部查看 Total time in main thread，对比是否下降
- 长任务（Long Tasks）数量与最大时长：展开“帧”或“标记”区域，识别 >50ms 的任务块，看优化后是否减少或缩短
- FCP / LCP / INP 等 Web Vitals：右侧 Summary 面板直接显示数值，注意 LCP 元素是否变化、INP 是否低于 200ms
- JS 堆内存峰值：切换到“内存”子面板，对比两次录制中堆内存最高点（单位 MB）
-
重排（Layout）与重绘（Paint）频次：在“事件分类”中筛选
Layout和Paint，统计发生次数
利用 Network 面板辅助验证
加载性能对比常需结合网络请求分析：
- 在 Network 面板中，分别录制前后两次刷新，观察 Finish 时间（底部状态栏）是否缩短
- 点击任一请求 → 右侧 Timing 标签，对比 DNS、Connect、SSL、Response 等分段耗时变化
- 使用 “比较视图”：选中多个请求（Ctrl+单击），右键 → “在比较视图中打开”，直观并排查看大小、耗时差异
