回流和重绘的区别

回流（reflow）和重绘（repaint）是浏览器渲染页面的两个不同过程，它们在概念上是分开的，但在实际发生时可能会有所交互。以下是两者区别：

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

总结来说，回流和重绘都是浏览器渲染页面时的重要过程，但它们在触发条件、对性能的影响以及减少它们的方法上有所不同。了解这些差异对于优化网页性能至关重要。