引起浏览器重排与重绘? 浏览器显示重叠

在浏览器中，重排（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` 等属性。