重排与重绘

一、是什么

重排（Reflow）

元素布局发生变化，需要重新计算位置

重绘（Repaint）

样式改变但不影响布局

二、区别

三、触发场景

重排

• 修改宽高
• 改变字体
• DOM 增删

重绘

• 修改颜色
• 修改背景

四、优化方案

• 批量修改 DOM
• 使用 class 替代逐个修改
• 使用 display: none 再操作
• 避免频繁读取 layout（offsetTop）

五、经典代码问题

div.style.width = '100px';
div.style.height = '200px';

❌ 多次回流

✅ 优化：

div.style.cssText = 'width:100px;height:200px;';