DevTools Rendering 面板
Rendering 面板提供绘制、媒体类型、布局偏移和渲染辅助开关，适合做视觉与渲染专项排查。
#type / concept
#status / growing
#tech / dev / frontend
#platform / browser
#resource / chrome-devtools
[!info] related notes
- 所属 MOC: 浏览器开发者工具 MOC
- 前置概念: 浏览器渲染过程, 重排与重绘
- 并列概念: Elements 面板, Performance 面板, Device Mode
- 易混淆概念: 浏览器模拟打印模式的方法
- 关系笔记: 浏览器开发者工具
DevTools Rendering 面板
一句话定义
Rendering 面板是一组渲染辅助开关，适合在视觉调试时把平时看不见的绘制信息显出来。
核心内容
它最适合回答什么问题
- 页面是否在频繁重绘
- 某个布局变化是否触发了可见偏移
- 打印媒体样式是否正确生效
- 滚动或动画时是否存在渲染异常
常见能力
- Paint flashing：观察哪些区域在重绘
- Layout Shift Regions：观察布局偏移区域
- Emulate CSS media type：切换到
print - 其他与滚动性能、图层、FPS 相关的可视化辅助开关
常见使用场景
- 调试 CLS
- 调试打印样式
- 怀疑某个交互导致频繁重绘
- 结合 Elements / Performance 验证布局和渲染推断
边界与易混淆点
- Rendering 面板是辅助验证工具，不替代 Performance 面板 的时间线分析
- 看到重绘区域，不代表一定有性能问题，要结合实际频率和代价判断
- 打印效果最终仍应以真实打印预览为准，见 浏览器模拟打印模式的方法