重绘和重排：概念、区别和应用示例
还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。
| No. | 内容链接 |
|---|---|
| 1 | Openlayers 【入门教程】 - 【源代码+示例300+】 |
| 2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
| 3 | Cesium 【入门教程】 - 【源代码+图文示例200+】 |
| 4 | MapboxGL【入门教程】 - 【源代码+图文示例150+】 |
| 5 | 前端就业宝典 【面试题+详细答案 1000+】 |
重绘（Repaint）和重排（Reflow）是Web前端开发中关于浏览器渲染机制的重要概念，下面将详细介绍这两个概念，并提供一些示例代码和应用场景。
重排（Reflow）：
重排，也称为布局（Layout），是指当元素的几何属性（如宽、高、位置）发生变化，或是元素的内容、可见性发生变化时，浏览器需要重新计算元素及其子元素的布局信息，包括它们的位置和尺寸。这一过程会导致浏览器构造一个新的渲染树，然后重新计算布局。
例如，考虑以下JavaScript操作会引起重排：
// 改变元素的宽度，这将触发重排
var element = document.getElementById('myDiv');
element.style.width = '50%';
应用场景：
- 改变元素的尺寸（width/height）、外边距（margin）、内边距（padding）等；
- 更改元素的位置（如通过修改left/top值）；
- 添加或删除可见DOM元素；
- 浏览器窗口大小改变（resize事件）。
重绘（Repaint）：
重绘是指元素的外观发生了改变，但不影响布局，如颜色、背景色、透明度等非几何属性的变化。在这种情况下，浏览器不需要重新计算元素的位置和大小，仅需要刷新受影响部分的像素。
例如，以下CSS属性修改可能会导致重绘但不重排：
// 改变元素的背景色，这将触发重绘
#myDiv {background-color: red; /* 原始颜色 */
}// 修改背景色
document.querySelector('#myDiv').style.backgroundColor = 'blue';
应用场景：
- 改变背景色、前景色、边框颜色等；
- 更改CSS透明度；
- 图像的SRC属性更改（加载新的图片）。
为了优化页面性能，应当尽量减少不必要的重排和重绘，特别是连续执行多个DOM操作时，可以尝试合并操作并利用requestAnimationFrame API，在下一帧绘制前一次性执行，这样可以降低视觉抖动并提升用户体验。同时，现代浏览器提供了各种优化手段，如层叠上下文、合成层等，合理利用这些技术也能有效降低重排和重绘带来的性能损失。