重排和重绘是什么，怎么解决？
在现代 Web 开发中，页面性能优化是提升用户体验的关键环节。其中，重排（Reflow）和重绘（Repaint）是两个核心概念，理解它们的触发机制并掌握优化方法，是前端工程师的必备技能。本文将从基础概念入手，探讨重排与重绘的关系，并提供一系列实用的优化策略。
一、重排（Reflow）：布局引擎的重新计算
重排，也称为回流，是浏览器对 DOM 元素的布局信息进行重新计算的过程。布局信息包括元素的尺寸、位置、边距等几何信息，这些信息决定了元素在视口内的最终呈现位置。
触发重排的常见场景：
- DOM 元素的添加、删除或修改
- 元素尺寸的修改（width、height、margin 等）
- 窗口尺寸的变化（resize 事件）
- 字体大小的改变
- 查询某些属性值（offsetWidth、scrollTop 等）
// 以下操作会触发重排
element.style.width = '200px';
document.body.appendChild(newElement);
window.addEventListener('resize', handleResize);二、重绘（Repaint）：视觉样式的重新渲染
重绘是指当一个元素的外观发生改变，但没有影响到布局信息时，浏览器将元素的外观重新绘制的过程。重绘的代价比重排要小，但频繁触发仍会影响性能。
触发重绘的常见场景：
- 修改元素的颜色、背景色
- 修改元素的透明度、阴影
- 修改元素的边框样式
/* 以下样式修改会触发重绘 */
.element {color: red;background-color: yellow;box-shadow: 0 0 10px rgba(0,0,0,0.5);
}三、重排与重绘的关系
重排和重绘的关系可以总结为：
- 重绘不一定触发重排：仅修改外观属性（如颜色、透明度）只会触发重绘。
- 重排必然触发重绘：任何导致布局变化的操作，都会先触发重排，再触发重绘。
性能影响对比：
- 重排需要重新计算整个布局树，性能消耗较大
- 重绘只需更新元素的外观，性能消耗较小
- 避免不必要的重排是性能优化的关键
四、优化策略：减少重排与重绘
1. 批量操作 DOM
使用文档片段（DocumentFragment）或隐藏元素进行批量 DOM 操作，减少重排次数。
// 使用DocumentFragment批量添加元素
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {const div = document.createElement('div');fragment.appendChild(div);
}
document.body.appendChild(fragment); // 仅触发一次重排2. 缓存布局信息
避免频繁读取会触发重排的属性，如果确实需要多次使用，应缓存这些值。
// 反模式：每次循环都读取offsetWidth
for (let i = 0; i < 100; i++) {element.style.width = `${element.offsetWidth + 10}px`; // 每次循环触发重排
}// 优化：缓存offsetWidth
const width = element.offsetWidth;
for (let i = 0; i < 100; i++) {element.style.width = `${width + 10}px`; // 仅修改样式，不触发重排
}3. 合并样式更改
使用 CSS 类或一次性设置多个样式属性，减少重排次数。
// 反模式：多次修改样式触发多次重排
element.style.width = '200px';
element.style.height = '300px';
element.style.margin = '10px';// 优化：一次性修改所有样式
element.style.cssText = 'width: 200px; height: 300px; margin: 10px;';// 或使用CSS类
element.classList.add('new-style');4. 使用 requestAnimationFrame
将复杂的 DOM 操作放在浏览器的下一帧执行，避免阻塞当前渲染。
function updatePosition() {// 获取元素位置const left = element.offsetLeft;// 使用requestAnimationFrame在下一帧更新样式requestAnimationFrame(() => {element.style.left = `${left + 10}px`;});
}5. 使用 CSS3 硬件加速
对于频繁变动的元素（如动画），使用 transform 和 opacity 属性，利用 GPU 加速。
/* 使用transform代替top/left实现动画 */
.element {transition: transform 0.3s ease;
}.element:hover {transform: translateX(10px); /* 不会触发重排 */
}6. 优化布局结构
简化 DOM 结构，避免过深的嵌套层级，减少布局计算的复杂度。
<!-- 反模式：过深的嵌套结构 -->
<div><div><div><p>Content</p></div></div>
</div><!-- 优化：扁平化结构 -->
<div class="container"><p>Content</p>
</div>五、总结
重排和重绘是影响页面性能的重要因素，优化的核心原则是：
- 减少重排次数：批量操作 DOM，避免频繁读取布局信息
- 降低重排成本：简化 DOM 结构，使用 CSS3 硬件加速