在前端开发过程中，页面的性能优化是一个至关重要的环节。而重绘（Repaint）和重排（Reflow）是影响页面性能的两个关键因素。了解它们的原理以及如何减少它们的发生，对于提升页面的响应速度和用户体验有着极其重要的意义。
一、重绘与重排的定义
重绘（Repaint）
当元素的样式发生改变但不影响其布局时，浏览器会重新绘制该元素。例如，改变元素的颜色、背景等属性。这就好比给一面墙重新刷漆，墙的位置和大小都没有变化，只是外观发生了改变。重绘虽然不会改变页面的布局，但仍然会消耗一定的系统资源，尤其是在元素较多或者元素样式复杂的情况下。
重排（Reflow）
当 DOM 元素的尺寸、位置发生变化，或者页面的布局结构被改变时，浏览器就需要重新计算布局，这个过程称为重排。重排是一个相对复杂的操作，因为它不仅会影响当前元素，还可能会影响其他元素的位置。例如，改变元素的宽度、高度、边距等属性，或者添加、删除元素等操作都可能触发重排。重排的性能开销通常比重绘要大得多，因为它涉及到整个页面布局的重新计算。
二、重绘与重排的关系
重排一定会影响重绘，因为当页面布局发生变化时，浏览器需要重新绘制受影响的元素。然而，重绘并不一定会导致重排。例如，改变元素的背景颜色只会触发重绘，而不会影响页面的布局。
三、减少重绘与重排的方法
（一）批量修改 DOM
在实际开发中，我们经常会通过 JavaScript 动态修改 DOM 元素的样式。如果在循环中逐个修改元素的样式，每次修改都可能触发重排和重绘，从而导致性能问题。为了避免这种情况，我们可以采用批量修改的方式。
例如，以下代码片段中，每次循环都会修改元素的样式，这将导致多次重排和重绘：
const el = document.getElementById('myEl');
for (let i = 0; i < 100; i++) {
el.style.width = '100px';
el.style.height = '100px';
el.style.margin = '10px';
el.className = 'my-class';
el.style.cssText = 'width:100px;height:100px;margin:10px';
}
为了避免多次重排和重绘，我们可以将所有样式修改集中在一起，然后一次性应用到元素上。例如，可以使用 className 来控制样式，或者将所有样式合并到一个字符串中，然后一次性设置 style.cssText 属性。这样可以减少浏览器的重排和重绘次数，从而提高性能。
（二）使用文档碎片（Document Fragment）
当需要批量添加多个元素时，直接将这些元素逐个添加到文档中会触发多次重排和重绘。为了避免这种情况，我们可以使用文档碎片（DocumentFragment）来优化操作。
文档碎片是一个轻量级的 DOM 对象，它不会自动插入到文档中，因此不会触发重排和重绘。我们可以先将所有新元素添加到文档碎片中，然后再将文档碎片一次性插入到文档中。这样可以将多次重排和重绘合并为一次，从而提高性能。
例如：
const fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
const el = document.createElement('li');
el.style.width = '100px';
el.style.height = '100px';
el.style.margin = '10px';
fragment.appendChild(el); // 这里不会触发重排和重绘
}
document.body.appendChild(fragment); // 一次性触发一次重排和重绘
（三）缓存布局信息
在某些情况下，我们可能需要多次读取元素的布局信息，例如 offsetTop、offsetLeft 等。每次读取这些属性时，浏览器都会触发重排，以确保获取到最新的布局信息。为了避免多次触发重排，我们可以将这些布局信息缓存起来，然后在需要时使用缓存值。
例如：
// 不缓存布局信息
for (let i = 0; i < 1000; i++) {
el.style.left = el.offsetTop + 1 + 'px'; // 每次读取 offsetTop 都会触发重排
}
// 缓存布局信息
let top = el.offsetTop; // 缓存布局信息
for (let i = 0; i < 1000; i++) {
top += 1;
el.style.top = top + 'px'; // 使用缓存值，避免多次触发重排
}
（四）使用 CSS3 的 transform 属性
CSS3 的 transform 属性可以实现元素的位置、旋转、缩放等变换，而且这些操作不会触发重排，只会触发重绘。这是因为 transform 属性不会影响页面的布局结构，它只是改变了元素的外观。因此，在需要调整元素位置时，优先使用 transform 属性可以提高性能。
例如：
// 使用 transform 属性调整位置，不会触发重排
el.style.transform = 'translateX(100px)';
el.style.transform = 'translateY(100px)';
el.style.transform = 'translate(100px, 100px)';
// 使用 left 和 top 属性调整位置，会触发重排
el.style.left = '100px';
el.style.top = '100px';
（五）避免使用表格布局
表格布局在某些情况下可能会导致性能问题，因为表格的布局计算相对复杂。当表格中的某个单元格发生变化时，浏览器可能需要重新计算整个表格的布局。因此，在可能的情况下，尽量避免使用表格布局，改用更灵活的布局方式，如 Flexbox 或 Grid 布局。
（六）使用虚拟 DOM
虚拟 DOM 是一种轻量级的 JavaScript 对象，它是真实 DOM 的抽象表示。通过使用虚拟 DOM，我们可以在内存中对 DOM 进行操作，然后一次性将更新后的虚拟 DOM 转换为真实 DOM。这样可以减少直接操作真实 DOM 所带来的重排和重绘次数，从而提高性能。
例如，React 就是基于虚拟 DOM 的框架。它通过比较新旧虚拟 DOM 的差异，然后只对发生变化的部分进行更新，从而避免了不必要的重排和重绘。
（七）减少 DOM 元素的数量
页面中的 DOM 元素数量越多，重排和重绘的性能开销就越大。因此，在设计页面时，尽量减少不必要的 DOM 元素。例如，可以通过合并多个元素的样式，或者使用更简洁的 HTML 结构来减少 DOM 元素的数量。
（八）使用 CSS 动画
在实现动画效果时，尽量使用 CSS 动画而不是 JavaScript 动画。CSS 动画由浏览器的渲染引擎直接处理，性能更好，而且不会触发重排。例如，可以使用 @keyframes 规则来定义动画效果，然后通过设置元素的 animation 属性来应用动画。
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
#myEl {
animation: move 1s;
}
（九）避免使用复杂的 CSS 选择器
复杂的 CSS 选择器会增加浏览器的样式匹配时间，从而影响性能。尽量使用简单、明确的选择器，避免使用过多的嵌套和伪类。例如，使用类选择器比使用标签选择器或 ID 选择器更高效。
（十）使用硬件加速
硬件加速可以利用 GPU 的强大性能来处理页面的渲染任务，从而提高性能。在某些情况下，可以通过设置 CSS 属性来启用硬件加速。例如，设置 transform: translateZ(0) 或 will-change: transform 等属性可以触发硬件加速。
#myEl {
transform: translateZ(0);
will-change: transform;
}
四、总结
重绘和重排是影响页面性能的两个重要因素。通过采用上述方法，我们可以有效地减少重绘和重排的发生次数，从而提高页面的响应速度和用户体验。在实际开发中，我们应该根据具体需求选择合适的方法，并结合多种优化手段来达到最佳的性能效果。同时，我们也应该关注浏览器的性能工具，如 Chrome 的开发者工具，通过这些工具可以直观地查看页面的重绘和重排情况，从而更好地进行性能优化。
