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

在火狐浏览器里调试渲染性能，Performance 面板是最直观的武器——黄色的 Layout 块代表重排，绿色的 Paint 块就是重绘。而强制同步布局（比如先读取 clientWidth 再改样式）是触发重排的常见元凶；另外，about:config 里有个 nglayout.debug.paint_flashing 开关，打开后能用绿色高亮标出每个重绘区域。

严格来说，火狐的开发者工具并没有一个“一键高亮重排/重绘”的按钮，但通过 Performance 面板捕获 Layout 和 Paint 事件，再结合触发条件，完全可以精准定位重排次数和重绘范围。

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

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

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

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

重排多半由“强制同步布局”引发——典型诱因是读取以下属性后立即修改样式：

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 个变为多个。