火狐浏览器开发者工具如何查看页面的重排与重绘？

火狐浏览器可通过Performance面板识别重排重绘：黄色区块为Layout（重排），绿色为Paint（重绘）；强制同步布局（如读取clientWidth后改样式）触发重排；about:config启用nglayout.debug.paint_flashing可高亮重绘区域。

火狐浏览器开发者工具本身不直接高亮显示重排（Reflow）和重绘（Repaint）过程，但可通过 Performance 面板捕获并识别 layout 和 paint 事件，结合触发条件精准定位重排次数与重绘区域。

启用性能录制并捕获渲染行为

按 Ctrl + Shift + I（Windows/Linux）或 Cmd + Opt + I（macOS）打开开发者工具 → 切换到 Performance 标签页 → 点击左上角圆形 ● 录制按钮 → 在页面上执行目标操作（如点击、滚动、DOM 插入）→ 再次点击 ● 停止录制。

录制结束后，时间轴区域会生成彩色火焰图。黄色区块代表 Layout（即重排），绿色区块代表 Paint（即重绘）。放大密集彩条区域，可逐帧查看 layout/paint 事件的调用栈与耗时。

识别重排触发点：关键属性读取

重排常由强制同步布局（Forced Reflow）引发，典型诱因是读取以下属性后立即修改样式：

clientWidth、clientHeight、offsetTop、offsetLeft、getBoundingClientRect()、scrollHeight、scrollTop。

在 Console 中执行类似代码：console.log(document.body.clientWidth); document.body.style.margin = '10px'; → 回车后立即触发一次 Layout；若连续读写三次，Performance 面板将清晰显示三个独立的黄色 Layout 块。

【注意】 这类读取必须发生在样式变更前，且不能被浏览器批量合并——只要中间穿插了任何 layout 触发点（哪怕只是 console.log），就会打断优化队列，导致多次重排。

验证重绘区域：开启绘制闪烁

火狐浏览器原生不支持 Chrome 的 --show-paint-rects 启动参数，但可通过 about:config 启用等效调试功能：

在地址栏输入 about:config → 接受风险提示 → 搜索 nglayout.debug.paint_flashing → 双击将其值设为 true。

设置生效后，所有后续页面刷新都会以绿色矩形高亮每次重绘发生的区域。矩形持续约 100ms，快速闪烁，直观暴露无效重绘范围。

【重要前提】 此选项仅在 Firefox Nightly 或 Aurora 版本中默认可用；稳定版需手动启用，且重启浏览器后才生效。

排除干扰：区分重排与重绘

第一步：关闭所有可能影响渲染的扩展，尤其是广告拦截器或 CSS 注入类插件，它们可能注入样式或脚本，伪造 layout/paint 行为。

第二步：在 Performance 面板录制前，勾选 Layout 和 Paint 复选框（位于录制控制栏下方），取消勾选 JS Profile 和 Memory，避免数据过载掩盖关键帧。

第三步：对比两次录制——一次执行 DOM 批量插入（无属性读取），另一次在每次 appendChild 后加 el.offsetHeight，观察黄色 Layout 块是否从 1 个变为多个。