这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天
重绘和重排（reflow and repaint）
在Web开发中，重排（reflow）和重绘（repaint）是性能优化中的两个重要概念。它们的出现通常会导致页面性能下降，因此开发人员需要了解它们的工作原理，以便尽可能减少它们的出现。
What: 什么是重绘（repaint）?
重绘（repaint）则指的是当元素的样式属性发生变化时，浏览器会根据新的样式重新绘制元素的外观，但是并不需要重新计算元素的几何属性。因为重绘不需要重新计算布局，所以它比重排要快得多。常见的触发重绘的操作包括修改元素的颜色、背景、边框、阴影等。
What: 什么是重排（reflow）?
重排（reflow）指的是当DOM元素的布局发生变化时，浏览器需要重新计算元素的几何属性（如位置和尺寸）和样式，并更新布局树（layout tree），最终重新渲染页面。因为这个过程中需要遍历DOM树和计算样式，所以重排是比较耗时的，会影响页面的响应速度和用户体验。常见的触发重排的操作包括修改DOM元素的尺寸、位置和内容，以及修改CSS样式等。
How: 如何避免重排和重绘的产生
由于重排和重绘都会影响页面性能，因此开发人员需要尽量减少它们的出现。一些减少重排和重绘的方法包括：
- 批量修改样式：如果需要修改多个元素的样式，最好一次性修改完毕，而不是逐个修改。这可以减少重排和重绘的次数。
- 使用class替代style属性：使用class可以将多个样式属性集中在一起，方便修改和管理。这也可以减少重排和重绘的次数。
- 避免频繁读取布局信息：如果需要多次读取元素的布局信息，最好将这些信息缓存下来，避免反复计算。
- 使用transform代替position：使用transform可以避免重排，因为它不会影响元素的布局。
- 避免强制同步布局：有时候需要读取元素的布局信息才能继续执行后续操作，这时候最好使用异步方式来读取布局信息，避免强制同步布局导致的重排。
总之，重排和重绘都会影响页面性能，因此开发人员需要尽可能减少它们的出现，以提高页面的响应速度和用户体验。
