重绘是指当页面中的元素样式发生变化时，浏览器会重新绘制这些元素的外观，但是位置和大小等并未发生变化。比如修改元素的背景色或字体颜色等。
回流是指当页面中的元素布局发生变化时，浏览器需要重新计算元素的位置和大小等，然后重新绘制页面。比如添加、删除、移动元素或修改元素的尺寸等。
回流比重绘更加耗费性能，因为回流需要重新计算元素的位置和大小等，而这个计算是非常耗费时间的。而重绘只需要重新绘制元素的外观，比较快速。
因此，我们在编写页面时应尽量避免频繁的回流操作，可以通过以下方式来减少回流的次数：
- 使用 CSS3 动画代替 JavaScript 动画，因为 CSS3 动画是在 GPU 上进行处理的，而 JavaScript 动画是在 CPU 上进行处理的，性能差异很大。
- 避免频繁修改元素的样式，可以将需要修改的样式集中到一起，然后一次性修改，这样可以减少回流的次数。
- 避免频繁读取元素的样式，因为读取样式也会触发回流操作，可以使用缓存或者批量读取的方式来减少读取样式的次数。
- 使用文档片段（document fragment）来减少 DOM 操作，因为 DOM 操作也会触发回流操作，使用文档片段可以将多次 DOM 操作合并成一次操作，减少回流的次数。
总之，回流和重绘是浏览器性能优化中的重要概念，我们在编写页面时应尽量避免频繁的回流操作，从而提升页面的性能和用户体验。
