Performance面板可定位高频重排重绘：录制交互后查看火焰图中Layout（黄）和Paint（紫）块，展开Layout识别触发JS行，警惕Forced reflow，辅以Rendering面板验证优化效果。
直接用浏览器开发者工具的 Performance 面板录制操作，就能定位哪些 JS 调用触发了高频重排重绘。关键不是“看到有”，而是识别出“不该有”的渲染行为。
用 Performance 面板抓取真实渲染开销
在 Chrome 或 Edge 中打开 DevTools → Performance 标签 → 点击录制（●），执行目标交互（比如滚动、点击、列表加载），停止后查看火焰图：
- 重点关注 Layout（黄色）和 Paint（紫色）任务块——它们越长、越密集，说明重排重绘越严重
- 展开 Layout 项，能看到具体哪行 JS 触发了它（例如
element.offsetWidth、appendChild或样式写入） - 若 Layout 后紧跟着 Paint，大概率是重排引发的连锁重绘；若只有 Paint，则可能是纯样式变更（如 color、opacity）
识别“强制同步布局”这类隐藏陷阱
很多重排不是显式修改 DOM 引起的，而是读写混用导致的“布局抖动”。典型模式：
- 循环中反复读取
offsetTop/getBoundingClientRect()后立刻改style.left - 在
scroll回调里一边读scrollTop，一边更新多个元素位置
Performance 面板会把这些操作标记为 Forced reflow，并高亮对应 JS 调用栈。一旦发现，就把读操作全部前置、缓存结果，写操作批量后置。
立即学习“Java免费学习笔记（深入）”；
用 Rendering 面板辅助验证优化效果
开启 DevTools 的 Rendering → 勾选 “Paint flashing” 和 “Layout Shift Regions”：
- 页面刷新时闪过的绿色区域 = 发生重绘的元素；频繁闪烁说明样式变更太碎
- 蓝色边框 = 触发了布局位移（CLS 指标相关），常由未设宽高的图片、动态插入内容引起
- 配合禁用 JavaScript 后对比，能快速判断是否 JS 主导了这些渲染行为
用 getEntries() 捕获运行时指标
在代码中主动记录关键帧的渲染耗时：
- 用
performance.getEntriesByType('layout')获取所有重排事件（需开启performance.mark()配合） - 监听
document.addEventListener('readystatechange', ...)后检查performance.memory是否异常增长（间接反映 DOM 操作失控） - 对动画类逻辑，用
requestAnimationFrame回调内计算performance.now()差值，确认是否稳定在 16ms 内
