引起浏览器重排与重绘？

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