需启用Chrome开发者工具的Paint Flashing功能以高亮重绘区域：一、通过Rendering面板勾选Paint flashing；二、用Ctrl+Shift+P输入Toggle paint flashing快捷切换；三、在chrome://flags启用Enhanced paint flashing并重启；四、结合Layers面板快照验证重绘来源。
如果您在调试网页性能时需要直观识别哪些区域正在被频繁重绘，以定位样式变更或脚本触发的渲染开销，则需启用Chrome开发者工具中的Paint Flashing功能。该功能通过瞬时绿色矩形块高亮每次重绘发生的像素范围，帮助快速发现不必要的paint行为。以下是实现此效果的步骤：
一、通过Rendering面板启用Paint Flashing
此方法利用DevTools内置的渲染覆盖层机制，在当前页面实时标记所有触发重绘的区域，无需重启浏览器，适用于所有稳定版Chrome（版本100+）。
1、在目标网页中按下 F12 或 Ctrl+Shift+I（Windows/Linux）/ Cmd+Option+I（macOS）打开开发者工具。
2、点击右上角三个点图标，选择 更多工具 → Rendering。
3、在Rendering面板中向下滚动，找到 Paint flashing 选项并勾选。
4、执行任意交互操作（如鼠标悬停、滚动、点击按钮或播放CSS动画），页面中被重绘的区域将立即以短暂闪烁的绿色矩形块形式呈现。
二、使用快捷键快速切换Paint Flashing状态
该方式绕过Rendering面板界面，通过键盘命令直接控制开关，适合高频调试场景，响应速度更快且不依赖面板是否已打开。
1、确保开发者工具处于激活状态（即使未完全展开，底部状态栏可见即可）。
2、按下 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS）调出命令菜单。
3、输入 Toggle paint flashing 并回车。
4、页面将立即启用或禁用重绘高亮，交互过程中可反复触发以对比不同状态下的重绘范围。
三、通过chrome://flags启用增强型Paint Flashing
此方案启用实验性渲染标记能力，支持更精细的重绘行为区分，例如单独高亮由transform变化引发的合成层重绘，与普通layout-triggered paint区分开来。
1、在地址栏输入 chrome://flags/#enable-composited-layer-borders 并回车。
2、在搜索框中输入 paint flashing，定位到 Enable enhanced paint flashing 选项。
3、将其状态从 Default 改为 Enabled。
4、点击页面右下角的 Relaunch 按钮重启浏览器。
5、重启后，再次通过Rendering面板启用Paint flashing，此时闪烁区域将按重绘类型叠加不同透明度与边框样式。
四、结合Layers面板验证重绘来源
该方法用于交叉验证Paint Flashing结果，通过图层树结构确认高亮区域是否属于独立合成层，从而判断是否可通过will-change或transform Z提升规避重绘。
1、保持开发者工具开启，按 Esc 打开Drawer面板（若未显示）。
2、切换至 Layers 标签页（若不可见，点击右上角“⋯”→ More Tools → Layers）。
3、在Layers面板中点击 Capture Layer Snapshot 按钮。
4、在快照视图中，将鼠标悬停于任一图层，右侧信息栏将显示其 Last painted at 时间戳及 Compositing reasons。
5、对照Paint Flashing闪烁位置，检查对应图层是否标记为 Paint invalidation 或 Style change 等原因。
