【八股系列】谈一谈对重绘和回流的理解？

🎉 博客主页：【剑九 六千里-CSDN博客】
🎨 上一篇文章：【说一说XSS攻击和CSRF攻击？】
🎠 系列专栏：【面试题-八股系列】
💖 感谢大家点赞👍收藏⭐评论✍

重绘 (Reflow) 和回流 (Repaint) 是 web 页面渲染中最昂贵的操作，它们会导致浏览器重新计算元素的几何结构和样式，并重新绘制页面的可见部分。

1. 重绘

重绘是指当元素的外观（如颜色、背景、边框等）发生改变时，浏览器只需要重新绘制该元素，而不需要重新计算其几何结构。

2. 回流（重排）

回流是指当元素的几何结构（如尺寸、位置等）发生改变时，浏览器需要重新计算元素的几何结构并重新绘制页面的可见部分。回流会导致重绘，并且在回流过程中，浏览器需要重新计算所有受影响的元素的几何结构和样式。

重绘和回流的成本是相对较高的，因为它们需要浏览器重新计算和重新绘制页面的可见部分。因此，在编写高效的 web 代码时，需要尽量避免触发重绘和回流。

3. 一些可以触发重绘和回流的操作

包括：

• 改变元素的尺寸、位置、或几何属性（如 width、height、padding、margin、left、top 等）。
• 改变元素的外观（如 color、background-color、border-style 等）。
• 改变元素的字体大小。
• 添加或删除可见的 DOM 元素。
• 改变窗口的大小。
• 激活 CSS 伪类（如 :hover）。
• 触发 CSS animations 或 transitions。
• 使用 JavaScript 代码修改 DOM 元素的样式。

4. 避免重绘和回流

为了避免重绘和回流，可以采用以下的最佳实践：

• 避免使用触发重绘和回流的 CSS 属性。
• 批量修改 DOM 元素的样式时，使用 DocumentFragment 或 createDocumentFragment() 创建一个临时的 DOM 片段，在该片段中进行所有修改，然后将该片段添加到文档中。
• 避免使用 table 布局，因为 table 布局的回流成本相对较高。
• 避免使用 CSS 表达式，因为 CSS 表达式会在每次计算时重新计算其值。
• 避免使用 JavaScript 代码修改 DOM 元素的几何结构，因为这会触发回流。
• 避免使用 CSS 动画或 transitions，因为它们会触发回流和重绘。
• 避免使用 JavaScript 代码读取元素的布局属性（如 offsetWidth、offsetHeight、scrollWidth、scrollHeight、clientWidth、clientHeight 等），因为这会触发回流。
• 避免使用 JavaScript 代码修改元素的字体大小，因为这会触发回流。
• 避免使用 JavaScript 代码修改元素的外观（如 color、background-color、border-style 等），因为这会触发重绘。
• 避免在循环中修改 DOM 元素的样式，因为这会触发回流和重绘。

5. 代码示例

• 重绘示例

// 获取一个 DOM 元素
const element = document.getElementById('myElement');

// 改变元素的字体颜色
element.style.color = 'red';

• 回流示例

// 获取一个 DOM 元素
const element3 = document.getElementById('myElement3');

// 改变元素的尺寸
element3.style.width = '200px';
element3.style.height = '200px';

// 回流示例 - 避免

// 获取一个 DOM 元素
const element4 = document.getElementById('myElement4');

// 批量修改 DOM 元素的样式
const fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
  const newElement = document.createElement('div');
  newElement.style.width = '200px';
  newElement.style.height = '200px';
  fragment.appendChild(newElement);
}
// 将修改后的 DOM 元素添加到文档中
element4.appendChild(fragment);