先打开Rendering面板：按Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（Mac），输入“Rendering”并选择“Show Rendering”；再勾选Paint flashing（绿色闪烁标识重绘）、Layer borders（边框标识合成层）和FPS meter（右上角实时帧率），三者需协同观察以准确定位渲染异常。
直接看 DevTools 的 Rendering 面板就能定位大多数渲染异常，但前提是知道该开哪几项、点哪里、盯什么指标——开错开关或只看 FPS 就等于没看。
怎么打开 Rendering 面板并启用关键调试功能
Rendering 面板默认不显示，需手动激活：
- 在 Chrome DevTools 中按
Cmd+Shift+P（macOS）或Ctrl+Shift+P（Windows/Linux），输入Rendering，选择Show Rendering - 勾选
Paint flashing：重绘区域会以绿色闪烁，高频闪烁说明样式频繁变更或 JS 持续触发重绘 - 勾选
Layer borders：带边框的图层表示已提升为合成层，transform或opacity动画应落在这类图层上 - 勾选
FPS meter：右上角实时显示帧率，持续低于 60 表示主线程被阻塞或布局/绘制过重
注意：Paint flashing 和 Layer borders 必须同时开启才有对比意义；仅开前者可能误判“全是重绘”，实则是图层未分离导致整块刷新。
Paint flashing 绿闪太多？先确认是不是真问题
绿色闪烁本身不等于 bug，要看频率和范围：
立即学习“前端免费学习笔记（深入）”；
- 页面滚动时局部小范围持续绿闪：大概率是
background-attachment: fixed或will-change: scroll-position引发的全层重绘，改用contain: layout paint或移除固定背景 - 鼠标悬停就大面积闪：检查是否用了
:hover触发width/height/top等几何属性变更，换成transform: scale()或opacity - 输入框聚焦时整页闪：可能是
outline或box-shadow在 focus 状态下触发布局，加outline: none并用box-shadow: 0 0 0 2px #xxx替代 - 完全静止时仍有绿闪：检查是否有
requestAnimationFrame循环里读取了offsetWidth或getBoundingClientRect()，这会强制同步回流
Layer borders 显示图层太少？别急着加 will-change
浏览器自动提升图层有明确规则，盲目加 will-change: transform 可能适得其反：
- 只有满足以下任一条件才会自动创建独立图层：
transform（非none）、opacity（filter、backdrop-filter、perspective、clip-path（部分值） -
will-change是提示而非指令，加了也不保证提升，且会提前占用 GPU 内存；仅对明确要动画、且当前未提升的元素使用 - 父元素有
overflow: hidden且子元素transform超出边界时，子元素可能被裁剪而不提升图层——此时需给父元素加transform: translateZ(0)强制建层 - 用
chrome://gpu查看“Graphics Feature Status”，确认Compositing和Rasterization是否启用，禁用状态下 Layer borders 无效
为什么 Performance 面板里 Layout 时间很长，但 Elements 里看不出样式问题？
Layout 阶段耗时高，往往不是 CSS 写错了，而是 JavaScript 在反复读写布局属性：
- 典型陷阱：
for (let i = 0; i —— 每次 <code>offsetTop都触发强制同步布局（Forced Synchronous Layout） - 修复方式：把所有读操作集中到循环前（如
const tops = Array.from(els).map(el => el.offsetTop)），所有写操作集中到循环后 - 更安全的做法：用
getComputedStyle(el).getPropertyValue('top')替代el.offsetTop，它不触发回流（但注意返回的是字符串，含单位） - Performance 面板中 Layout 事件若带 “Recalculate Style” 前缀，说明是 CSSOM 重建慢，检查是否用了
@import、深层嵌套选择器或通配符重置
真正卡住渲染的，往往不是你写的那行 display: flex，而是某次不经意的 clientHeight 读取。渲染分析的本质，是把“视觉表现”映射回“执行路径”，而不是盯着样式表找错误。
