重绘和重排：概念、区别和应用示例

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

---

重绘（Repaint）和重排（Reflow）是Web前端开发中关于浏览器渲染机制的重要概念，下面将详细介绍这两个概念，并提供一些示例代码和应用场景。

重排（Reflow）：
重排，也称为布局（Layout），是指当元素的几何属性（如宽、高、位置）发生变化，或是元素的内容、可见性发生变化时，浏览器需要重新计算元素及其子元素的布局信息，包括它们的位置和尺寸。这一过程会导致浏览器构造一个新的渲染树，然后重新计算布局。

例如，考虑以下JavaScript操作会引起重排：

// 改变元素的宽度，这将触发重排
var element = document.getElementById('myDiv');
element.style.width = '50%';
1
2
3

应用场景：

• 改变元素的尺寸（width/height）、外边距（margin）、内边距（padding）等；
• 更改元素的位置（如通过修改left/top值）；
• 添加或删除可见DOM元素；
• 浏览器窗口大小改变（resize事件）。

重绘（Repaint）：
重绘是指元素的外观发生了改变，但不影响布局，如颜色、背景色、透明度等非几何属性的变化。在这种情况下，浏览器不需要重新计算元素的位置和大小，仅需要刷新受影响部分的像素。

例如，以下CSS属性修改可能会导致重绘但不重排：

// 改变元素的背景色，这将触发重绘
#myDiv {
    background-color: red; /* 原始颜色 */
}

// 修改背景色
document.querySelector('#myDiv').style.backgroundColor = 'blue';
1
2
3
4
5
6
7

应用场景：

• 改变背景色、前景色、边框颜色等；
• 更改CSS透明度；
• 图像的SRC属性更改（加载新的图片）。

为了优化页面性能，应当尽量减少不必要的重排和重绘，特别是连续执行多个DOM操作时，可以尝试合并操作并利用requestAnimationFrame API，在下一帧绘制前一次性执行，这样可以降低视觉抖动并提升用户体验。同时，现代浏览器提供了各种优化手段，如层叠上下文、合成层等，合理利用这些技术也能有效降低重排和重绘带来的性能损失。