6、什么是重排重绘？

一、重排（reflow）

定义
- 重排是指浏览器重新计算元素的几何属性（如位置、尺寸等）的过程。当文档的布局（layout）因为某些操作而发生改变时，浏览器需要重新构建渲染树（render tree）来确定元素在页面中的位置和大小。
- 例如，当你改变了一个元素的宽度、高度、边距（margin）、填充（padding）、边框（border）等属性，或者添加、删除一个 DOM 节点时，浏览器会触发重排。因为这些操作影响了页面的布局结构，浏览器需要重新计算页面上其他元素的位置和大小，以确保页面的布局是正确的。
触发重排的常见操作
- 改变 DOM 结构
  - 当你使用 JavaScript 动态地添加或删除一个<div>元素时，例如：
    复制代码
```
// 创建一个新的div元素
var newDiv = document.createElement('div');
newDiv.textContent = '这是一个新的div';
// 将新的div元素添加到body元素中
document.body.appendChild(newDiv);
```
  - 这种添加元素的操作会改变 DOM 树的结构，浏览器会重新计算页面的布局，从而触发重排。
- 改变元素的几何属性
  - 假设你有一个 CSS 样式如下的<div>元素：
    复制代码
```
div {
  width: 100px;
  height: 100px;
  background - color: blue;
}
```
  - 如果你通过 JavaScript 改变这个<div>的宽度为200px，像这样：
    复制代码
```
var divElement = document.querySelector('div');
divElement.style.width = '200px';
```
  - 浏览器会重新计算这个<div>元素以及它周围相关元素的位置和大小，因为改变宽度可能会影响到页面的布局，所以会触发重排。

二、重绘（repaint）

定义
- 重绘是指当元素的外观（如颜色、背景等）发生改变时，浏览器重新绘制该元素的过程。它不会影响元素的几何属性，也就是不会改变元素在页面中的位置和大小。
- 例如，当你只改变了一个元素的颜色、背景色、透明度（opacity）等外观属性时，浏览器会进行重绘。
触发重绘的常见操作
- 改变元素的颜色相关属性
  - 比如有一个<p>元素，其 CSS 样式如下：
    复制代码
```
p {
  color: black;
}
```
  - 如果你通过 JavaScript 改变这个<p>元素的颜色为红色，像这样：
    复制代码
```
var pElement = document.querySelector('p');
pElement.style.color = 'red';
```
  - 浏览器会重新绘制这个<p>元素，因为颜色发生了改变，但元素的位置和大小没有受到影响，所以只会触发重绘。

重排的开销通常比重绘要大，因为重排涉及到重新计算元素的位置和大小等几何属性，可能会导致浏览器重新布局整个页面或者部分页面区域。在网页性能优化中，尽量减少不必要的重排和重绘操作是很重要的。