重绘和回流

重绘和回流是浏览器渲染页面时的两个重要概念。

1、重绘（repaint）指的是当元素的样式发生改变，但不影响其布局时，浏览器重新绘制元素的过程。例如，改变元素的颜色或背景图片。

2、回流（reflow）指的是当布局发生变化，需要重新计算元素的位置和大小时，浏览器重新渲染页面的过程。例如，改变元素的宽度或高度，或者改变元素的位置。

重绘和回流的过程是相互关联的。当某个元素的样式改变时，浏览器会进行重绘操作；当某个元素的布局发生变化时，浏览器会进行回流操作。而且，一个元素的回流操作会引发其子元素的重绘和回流操作，从而造成整个页面的重绘和回流。重绘和回流的频率越高，页面的渲染性能越低。因此，在编写代码时，应尽量减少重绘和回流的次数，以提高页面的性能。

一些常见的减少重绘和回流的方法包括：

• 使用CSS动画替代JavaScript动画，因为CSS动画只会触发重绘，而不会触发回流。
• 使用transform属性替代top、left等属性来改变元素的位置，因为transform属性不会触发回流。
• 使用documentFragment来批量插入DOM元素，然后再一次性添加到页面中，可以减少多次回流的次数。
• 尽量使用cssText或者classList来修改元素的样式，而不是直接修改style属性，因为直接修改style会导致元素的重绘和回流。