无需登录 数据私有 本地保存

DOM 变更性能分析器 - 记录并统计重排重绘

10
0
0
0
DOM 变更性能分析器
监控中
0
DOM 变更
0
疑似重排
0
疑似重绘
0
布局偏移
--
实时帧率 FPS
测试目标区域
Target
变更类型分布
重排相关
0%
重绘相关
0%
合成相关
0%
监控时长00:00
总变更次数0
最大布局偏移分0.000
事件日志 0
暂无日志，点击上方按钮开始测试
常见问题与知识点
重排（Reflow）也称为布局（Layout），是浏览器重新计算元素几何属性的过程。当DOM元素的尺寸、位置、显示状态等几何属性发生变化时，浏览器需要重新计算页面布局。重排的成本很高，因为它可能触发级联的重排，影响整个渲染树。常见触发重排的操作包括：修改width/height、添加/删除DOM节点、改变margin/padding、读取offsetHeight等几何属性（强制同步布局）。
重绘（Repaint）是浏览器重新绘制元素外观的过程，不涉及布局计算。当元素的非几何样式改变时（如color、background-color、box-shadow等），浏览器只需要重新绘制该元素，而不需要重新计算布局。重绘的成本通常低于重排，但仍然需要消耗GPU/CPU资源。注意：重排一定会触发重绘，但重绘不一定触发重排。
强制同步布局是指JavaScript在修改DOM后，立即读取元素的几何属性（如offsetHeight、getComputedStyle等），迫使浏览器必须在当前帧同步完成布局计算。这会阻塞主线程，导致性能瓶颈。例如：el.style.width='100px'; el.offsetHeight; 这里的offsetHeight读取会触发强制同步布局。最佳实践是：先批量读取，再批量写入，或者使用requestAnimationFrame分离读写阶段。
减少重排重绘的核心策略：
① 批量DOM操作：使用DocumentFragment或display:none的容器进行批量修改；
② 使用CSS类名切换替代逐个style修改；
③ 避免频繁读取几何属性：缓存offsetHeight等值；
④ 使用transform/opacity做动画，它们只触发合成，不触发重排重绘；
⑤ 使用will-change提示浏览器提前优化；
⑥ 使用CSS contain属性限制重排范围；
⑦ 使用requestAnimationFrame将操作分散到不同帧。
Layout Shift（布局偏移）是Web Vitals核心指标之一（Cumulative Layout Shift, CLS），衡量页面视觉稳定性。当页面加载过程中元素意外移动时，就会产生布局偏移。常见原因包括：无尺寸的图片/视频、动态注入的广告、Web字体加载导致的文本偏移等。CLS分数越低越好，Google建议CLS < 0.1。本工具使用PerformanceObserver监听layout-shift事件来追踪布局偏移。
使用top/left改变元素位置会触发重排（Layout → Paint → Composite完整渲染管线），而使用transform: translate()只触发合成（Composite），完全跳过Layout和Paint阶段。这就是为什么CSS动画推荐使用transform和opacity——它们可以由GPU合成器独立处理，不占用主线程，性能显著更优。
🔧 相关工具