Firefox DevTools 不提供一键式渲染性能报告，但可通过Performance面板录制并分析页面渲染全过程，识别掉帧、强制重排、频繁Paint等问题；需用无痕窗口、禁用缓存、启用CPU节流后录制交互，再结合FPS曲线、主线程瀑布图、Markers等定位瓶颈，最后导出JSON对比优化效果。
打开 Performance 面板并规范录制
按 Ctrl+Shift+E（Windows/Linux）或 Cmd+Opt+E（macOS）直接打开 Performance 面板。录制前务必做三件事：
- 用无痕窗口打开页面，避免扩展干扰
- 在 DevTools 设置中勾选「禁用 HTTP 缓存」
- 如需模拟低端设备，启用 CPU 节流（设置 → Performance → Enable CPU throttling）
点击红色圆点开始录制，执行一次典型交互（例如滚动到底部、点击展开菜单），再点击停止。DevTools 会生成带时间轴的完整分析视图。
聚焦三类渲染核心指标
录制结果默认显示 FPS 曲线、主线程瀑布图和事件分类。重点盯住以下位置：
- FPS 图表：绿色条代表稳定帧（60fps），出现黄色/红色缺口说明掉帧；缺口位置正下方，就是主线程被卡住的时间点
- 主线程瀑布图：横向长条中标为「Layout」「Recalculate Style」「Paint」「Composite Layers」的部分，直接对应渲染流水线各阶段耗时
-
Markers 标签页：勾选「Layout」和「JavaScript samples」后，可看到哪些 JS 函数调用了
getBoundingClientRect()或offsetTop，从而触发了强制同步布局
快速定位渲染瓶颈的具体元素
回到 Elements 面板，右键任意元素 → 「Inspect Accessibility Properties」，查看它是否被意外提升为独立合成层（Layer）。过多图层会拖慢 GPU 合成速度。
在 Inspector 的「布局」子面板中启用「显示网格」和「显示盒模型」，能立刻发现因 margin/padding/box-sizing 不一致导致的意外重排。
对疑似问题元素，切换到「计算值」标签页，检查 transform、opacity 是否为 none；若它频繁变更 top/left/width，就该改用 transform: translateX() 来规避 Layout 开销。
导出与横向对比数据
点击右上角「⋮」→「保存分析数据」，导出为 .json 文件（如 render-before.json 和 render-after.json）。人工比对时重点关注：
- 主线程总耗时（Summary 面板顶部数值）
- Layout 和 Paint 事件发生次数（Events 分类中筛选统计）
- LCP 元素的 Paint 时间点是否提前，以及前后是否出现额外 Layout
- 内存峰值是否异常升高（Memory 子面板中查看堆内存曲线最高点）
不复杂但容易忽略。
