Paint Flashing需在DevTools的Rendering面板中勾选启用，开启后通过交互触发重绘，绿色矩形块闪烁区域即为重绘范围；需结合Layer borders（蓝色为合成层）判断是否因未提升图层导致整块重绘。
Paint Flashing 怎么开、开了之后看什么
Paint Flashing 本质是让浏览器在每次重绘时，用绿色矩形块“闪一下”对应区域——它不解决性能问题，但能立刻告诉你：哪些元素正在被反复绘制。关键不是“开了没”，而是“开了之后是否和 Layer borders 一起看”。只开 Paint Flashing 容易误判：比如整个卡片都在闪，你以为是 CSS 写错了，其实只是它没被提升为独立合成层，导致一动就整块重绘。
开启步骤很直接：
- 打开目标页面，按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）调出命令菜单 - 输入
Rendering，选择Show Rendering - 在弹出的 Rendering 面板中，勾选
Paint flashing
注意：Paint flashing 开启后不会立即闪烁，要触发重绘行为才可见——比如 hover 某个按钮、滚动列表、播放动画、甚至手动修改 element.style.backgroundColor。没有交互，就没有重绘，也就没有闪烁。
为什么 Paint Flashing 有时不闪，或者闪得莫名其妙
常见现象是：改了 opacity，本该走合成层，却还是看到绿色闪烁；或者鼠标悬停，整个导航栏都闪，明显不合理。这通常不是功能失效，而是底层渲染机制在“诚实反馈”：
立即学习“前端免费学习笔记（深入）”；
-
opacity动画若没落在独立合成层上，仍会触发重绘（尤其在旧版 Chrome 或未启用will-change: opacity时） - 父容器设置了
transform: translateZ(0)，但子元素用了filter: blur(2px)，会导致子元素被强制光栅化，失去合成优势，重绘照常发生 - JS 中读取了
offsetHeight或调用了getComputedStyle()，触发了强制同步布局（forced synchronous layout），后续样式变更可能被批量重排+重绘，Paint Flashing 就会连闪多次
此时单看闪烁没用，必须同步打开 Layer borders——绿色边框代表普通图层，蓝色边框才是合成层。如果闪烁区始终在绿色边框内，说明它还没被 GPU 加速接管。
Paint Flashing 和 Performance 面板里的 Paint 事件不是一回事
很多人混淆这两者：Paint flashing 是覆盖层视觉提示，实时、粗粒度、面向人眼判断；而 Performance 面板里录制后看到的 Paint 事件，是主线程实际执行的绘制任务，带毫秒级耗时、调用栈、甚至能点开看具体哪一行 CSS 触发了它。
- 想快速定位“谁在瞎画”？用
Paint flashing+Layer borders组合盯交互过程 - 想确认“一次重绘花了多久、是不是卡主线程”？必须录一段 Performance，过滤出
Paint和Layout事件 -
Paint flashing不显示耗时，也不告诉你是不是可避免——它只说“这里发生了”，至于“该不该发生”，得靠你结合 CSS 属性（比如是否用了transform而非left）去判断
最常被忽略的一点：Paint Flashing 的闪烁持续时间极短（几十毫秒），眼睛容易漏掉。建议用手机录屏慢放，或者配合 FPS meter ——当帧率掉到 40 以下且绿色块高频出现，基本可以确定是重绘瓶颈，而不是偶发抖动。
