什么是回流与重绘，如何尽力避免

回流（reflow）和重绘（repaint）是浏览器渲染页面的两个不同过程。

回流概念（reflow）

当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。【重新排列布局，即打碎重组】

重绘概念（repaint）

当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式。这个过程叫做重绘。

回流和重绘的区别

• 触发条件不同。回流发生在当页面的布局和几何信息发生改变时，例如添加或删除DOM元素、元素位置改变、元素尺寸改变（如边距、填充、边框、宽度和高度变化）、内容变化（例如文本大小改变）、浏览器窗口尺寸改变；重绘则发生在元素的外观属性（如颜色、背景色、边框色）发生变化，而不影响元素的位置和尺寸。
• 对性能的影响不同。回流通常需要更多的计算资源，因为它涉及到重新计算页面的布局，而重绘则通常更快，因为它只是关于元素的外观属性。
• 减少回流和重绘的方法不同。减少回流的策略包括避免频繁地修改样式、使用transform代替top/left等位移属性、使用requestAnimationFrame来安排DOM更新等；减少重绘的策略包括使用缓存来减少对引起flush队列的属性的访问、使用cssText来一次性修改多个样式属性等。

 如何避免减少触发

• 如果想设定元素的样式，通过改变元素的 class 类名 (尽可能在 DOM 树的最里层)
• 避免设置多项内联样式
• 应用元素的动画，使用 position 属性的 fixed 值或 absolute 值
• 避免使用 table 布局，table 中每个元素的大小以及内容的改动，都会导致整个 table 的重新计算
• 对于那些复杂的动画，对其设置 position: fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响
• 使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘
• 避免使用 CSS 的 JavaScript 表达式

详细说明请看此博主的优秀文章：https://juejin.cn/post/7013187112849637407