浏览器机制 重绘与重排

在浏览器渲染页面的过程中，重绘（Repaint）和重排（Reflow）是两个重要的概念。

1. 重排（Reflow）： 当 DOM 结构中的元素发生变化，例如添加、删除、修改元素的位置或尺寸，浏览器需要重新计算元素的几何属性（如位置、大小），并重新布局页面的过程称为重排。重排会影响到整个页面的布局和渲染，因此是比较消耗性能的操作。常见的触发重排的操作包括：

   • 添加或删除 DOM 元素。
   • 修改 DOM 元素的位置、尺寸、内容。
   • 修改页面的样式（如修改 CSS 属性）。
   • 用户的交互操作，例如调整窗口大小、滚动页面等。

2. 重绘（Repaint）： 当页面中的元素样式发生变化，例如修改元素的颜色、背景色、字体等，但不影响元素的布局时，浏览器会重新绘制元素的内容，这个过程称为重绘。重绘不会改变元素的位置或大小，只会重新绘制元素的外观。相比重排，重绘的性能消耗通常较低。常见的触发重绘的操作包括：

   • 修改元素的颜色、背景色、文本样式等。
   • 添加或移除元素的阴影、边框、透明度等样式。
   • 元素的可见性发生变化（例如通过修改 display、visibility 属性）。

在实际开发中，尽量减少重排和重绘的次数可以提高页面的性能。可以通过以下方式来减少重排和重绘的次数：

• 使用 CSS3 动画代替 JavaScript 动画： CSS3 动画使用 GPU 加速，性能更好，且不会触发重排和重绘。
• 避免频繁修改样式： 尽量将样式修改集中在一起进行，避免多次修改同一个元素的样式。
• 使用 documentFragment 进行 DOM 操作： 在添加大量 DOM 元素时，可以先将它们添加到 documentFragment 中，然后再一次性添加到页面中，减少重排次数。
• 使用 CSS3 Transforms 和 Transitions： 这些属性能够在不影响页面布局的情况下进行动画和过渡，从而减少重排和重绘。

通过优化重排和重绘的过程，可以提高页面的性能和用户体验。