Chrome Rendering 面板不提供重排频率统计，仅能高亮重排区域和显示帧时间；需通过 Performance 面板录制后筛选 Layout 事件并手动计数独立块数量来获取真实重排次数。
Chrome Rendering 面板里根本没“重排频率”这个指标
直接说结论：Rendering 面板本身不提供重排（reflow）发生次数或频率的统计数字。它能高亮重排区域、显示帧时间，但不会告诉你“这 10 秒内触发了 47 次 layout”。想监控频率，得绕道 Performance 面板 + 手动标记 + 过滤分析。
用 Performance 面板抓 layout 事件的实操步骤
打开 DevTools → 切到 Performance 标签 → 点录制（●）→ 做交互（比如滚动、输入、切换 tab）→ 停止 → 在火焰图下方的 Bottom-Up 或 Call Tree 视图里筛选 Layout 相关条目：
-
Layout（主 layout 任务，对应强制同步重排） -
Update Layer Tree（常伴随 layout，但不等于重排） -
Recalculate Style（style dirty，不一定触发 layout）
关键点：只看 Layout 行，右键 → Flame Chart 中定位对应时间点，数横轴上独立的 Layout 块数量，才是真实重排发生次数。
为什么 Rendering 面板的 “Paint Flashing” 和 “FPS Meter” 不等于重排监控
这两个功能容易误导：
-
Paint Flashing只标出重绘（paint）区域，哪怕没重排也会闪（比如改background-color） -
FPS Meter显示帧率，但掉帧原因可能是 JS、paint、composite，不单是 layout；一次 layout 耗时 8ms 也可能不掉帧 - 开启
Layout Shift Regions是看布局偏移（CLS），和重排频率完全无关
容易被忽略的触发条件和隐蔽坑
很多代码看似“只读”，实则隐式触发 layout：
- 读取
offsetTop、getBoundingClientRect()、scrollHeight后立刻写样式 → 强制同步 layout - 循环中反复读写 DOM 尺寸（“layout thrashing”），浏览器可能每轮都 flush 一次
- CSS 中用了
width: fit-content或flex: 1+ 动态内容，resize 或 text change 都可能触发布局计算 - 使用
requestAnimationFrame时，在回调里读尺寸再改样式，仍可能在同帧内 layout 多次
真正要压低重排频率，不是靠面板“看到多少次”，而是从读写模式、批量更新、CSS containment 等源头控制。面板只是验证手段，不是监控仪表盘。
