[!info] related notes

• 所属 MOC: 浏览器开发者工具 MOC
• 渲染基础: 浏览器渲染过程, 重排与重绘
• 布局: Elements 面板
• 时间线: Performance 面板
• 打印: 浏览器模拟打印模式的方法

DevTools Rendering 面板

一句话定义

Rendering 不是另一个完整 profiler，而是一组：

把平时不可见的渲染状态和环境条件显式化的观察/模拟开关。

Paint Flashing

Paint flashing 高亮发生 repaint 的区域。

它适合验证：

• 某交互是否引起大面积 repaint；
• 动画/滚动期间哪些区域持续重绘；
• 修改是否真的缩小 paint 范围。

但：

出现 repaint ≠ 一定有性能问题。

频率、面积和 paint cost 仍要结合 Performance 判断。

Layout Shift Regions

用于观察发生非预期布局偏移的区域。

它适合快速发现“哪里在跳”，真正的时机、cluster 和用户体验影响仍应回 Layout Shift 调试 / Performance。

CSS Media 与用户偏好模拟

Rendering 可以模拟部分环境条件，例如：

• print media；
• prefers-color-scheme；
• prefers-reduced-motion；
• 其他受浏览器支持的 media / vision rendering 条件。

这些模拟适合验证 CSS 分支是否正确，不代表真实设备或打印机一定完全一致。

与 Elements / Performance 的分工

• Elements：当前 DOM / CSS / layout 结果。
• Rendering：可视化隐藏渲染现象，或模拟环境条件。
• Performance：时间线上这些工作花了多久、何时发生。

三者组合比单独看 paint flashing 更有价值。

典型验证流程

怀疑动画造成高代价 repaint：

1. Rendering 开 Paint flashing；
2. 复现动画；
3. 判断 repaint 范围；
4. Performance 录制；
5. 看 Paint / Layout cost；
6. 修改 CSS / 动画策略；
7. 再次对照。

常见误区

• paint flashing 越多 = 页面一定越慢；
• 没有 Layout Shift 高亮 = 所有布局性能都正常；
• print emulation 与真实打印输出必然一致；
• 用 Rendering 面板代替 Performance trace。

学习检查

1. Rendering 面板与 Performance 面板的证据类型有什么差异？
2. Paint flashing 能证明什么，不能证明什么？
3. Layout Shift regions 为什么只是定位入口，不等于完整 CLS 根因分析？
4. media emulation 为什么属于环境模拟，而不是最终真实设备证明？
5. Elements、Rendering、Performance 三者怎样共同分析一个动画抖动问题？