重排和重绘

重排（reflow），也称为布局（layout），是指浏览器根据文档的结构和样式计算元素的位置和大小，并确定页面中的元素在视觉上的呈现。当页面中的元素发生变化时（例如添加、删除、修改元素、改变元素的位置、大小、样式等），浏览器需要重新计算元素的布局，这个过程就是重排。重排会涉及到整个页面或部分页面的重新布局，是一种较为昂贵的操作。

重绘（repaint），也称为渲染（rendering），是指根据元素最新的样式信息，将页面元素的可视部分重新绘制在屏幕上。当元素的样式发生变化但不影响其布局时（例如修改元素的颜色、背景、透明度等），浏览器只需要重新绘制元素，而不需要重新计算布局。重绘的代价相比重排来说较小。

需要注意的是，重排和重绘是相互关联的。当发生重排时，会导致重绘；而发生重绘不一定会引起重排。因此，为了提高页面的性能，应该尽量减少重排的次数。

以下是一些可能触发重排和重绘的操作：

• 添加、删除、修改DOM元素的结构和属性
• 修改元素的位置、尺寸（包括计算样式、布局属性）
• 修改元素的样式（例如颜色、背景、边框、透明度等）
• 修改字体大小
• 提交表单
• 浏览器窗口的大小变化

为了减少重排和重绘的次数，可以采取一些优化策略，例如：

• 使用CSS的transform属性代替top和left等属性来进行元素的移动和动画效果，因为transform属性只会引起重绘，而不会引起重排。
• 合并多次对DOM的修改，或使用文档片段（DocumentFragment）来进行批量插入。
• 尽量使用绝对定位或固定定位，减少文档流的重排。
• 使用节流（throttling）和防抖（debouncing）等技术来减少频繁调用可能引起重排的操作。
• 使用虚拟列表（virtual list）等技术来优化大量数据的展示，减少DOM元素的数量。

通过合理优化和减少重排和重绘的次数，可以提高页面的性能和用户体验。