在浏览器中，重排（reflow）和重绘（repaint）是与页面渲染相关的两个概念：
1. 重排（Reflow）：意味着重新计算并应用所有元素的几何属性，这可能会影响整个页面的布局。重排是一种较为昂贵的操作，会导致页面性能下降。常见的会触发重排的操作包括：
- 修改 DOM 结构（添加、删除、更新元素）。
- 修改元素的位置、尺寸或内容。
- 修改元素的样式（例如，改变元素的宽度、高度、边距、填充等）。
- 改变页面的默认字体。
2. 重绘（Repaint）：意味着重新绘制页面上的元素，但不会改变它们的布局。重绘的开销通常比重排小，但仍然会影响性能。触发重绘的操作包括：
- 修改元素的颜色、背景色等。
- 修改元素的可见性。
- 修改元素的透明度。
- 修改文本内容。
引起重排的 API 和属性：
1. DOM 操作：
- document.createElement()
- element.innerHTML
- element.appendChild()
- element.removeChild()
- element.style.xxx（修改元素样式）
2. 布局属性读取：
- 访问元素的几何属性（例如，`offsetTop`、`offsetLeft`、`offsetWidth`、`offsetHeight`）。
3. 尺寸和位置计算：
- element.getBoundingClientRect()
- window.getComputedStyle()
4. 修改页面默认字体：
- 修改页面的默认字体大小。
5. 激活 CSS 动画和过渡：
- 修改动画或过渡的 CSS 属性。
6. 改变窗口大小：
- window.resizeTo()
- window.resizeBy()
- window.innerWidth 和 window.innerHeight
7. Flexbox 相关属性：
- 改变元素的 display 属性为 flex 。
- 修改元素的 flex 属性。
8. Grid 相关属性：
- 改变元素的 display 属性为 grid。
- 修改元素的 `grid-template-columns`、`grid-template-rows` 等属性。
引起重绘的 API 和属性：
1. 修改元素的颜色、背景色等：
- element.style.color
- element.style.backgroundColor
2. 修改元素的可见性：
- element.style.visibility
- 3. 修改元素的透明度：
- element.style.opacity
4. 修改文本内容：
- 直接修改元素的文本内容。
5. 激活 CSS 动画和过渡：
- 修改动画或过渡的 CSS 属性。
6. 修改元素的类名：
- 添加或删除元素的类名。
7. 改变窗口大小：
- window.resizeTo()
- window.resizeBy()
- window.innerWidth` 和 `window.innerHeight`（窗口大小变化可能引起页面重新布局）
8. 改变字体相关属性：
- 修改元素的 `font-family`、`font-size` 等属性。