重绘和重排

介绍

重排（回流）：当页面布局，元素宽高发生改变时，需要重新计算盒模型在页面上的位置和大小就会发生重排。

重绘：计算好盒模型的位置、大小和其他一些属性之后，浏览器就会根据每个盒模型的特性进行绘制。

触发重排一定会重绘，重绘不一定重排。

对DOM的大小、位置进行修改后，浏览器需要重新计算元素的几何属性，就叫重排。

对DOM的样式进行修改，比如color，background-color，浏览器不需要重新计算几何属性，只触发重绘。

怎么触发

要触发重绘，可以修改影响元素视觉外观的CSS属性，比如color、background-color或opacity。这些更改会导致浏览器重新绘制受影响的元素，而不会触发布局重新计算。

要强制进行布局重新计算并同时触发重绘和重排，可以执行需要浏览器重新计算元素几何属性的操作。这包括修改元素的大小或位置、向DOM添加或删除元素，或更改字体大小。

需要注意的是，触发不必要的重绘和重排可能会对性能产生负面影响。因此，建议尽量减少布局更改，并使用CSS变换或动画等技术来优化渲染。