前端知识速记：重绘和回流

前端知识速记：重绘和回流

一、什么是重绘与回流

1. 重绘（Repaint）

重绘是指当元素的外观发生变化时，浏览器需要重新绘制这些元素。由于这些操作不会改变元素占据的空间，因此不需要进行回流。常见的重绘操作包括：

• 元素的颜色、背景色、边框等样式属性发生变化
• 元素的可见性发生变化（如 display: none 变为 display: block ps：针对这个例子也会触发回流，并且是先触发回流，再触发重绘）
  • 回流（Reflow） ：display: none 的元素不会在页面中占据空间，也不会参与布局计算。当将其改为 display: block 时，元素会重新出现在页面中并占据空间，这使得浏览器需要重新计算该元素以及可能受其影响的其他元素的布局信息，确定它们在页面上的位置和大小，这个重新计算布局的过程就是回流。
  • 重绘（Repaint） ：在完成回流，确定好元素新的布局信息后，浏览器需要根据新的样式和布局将元素绘制到屏幕上，更新元素的外观，这个过程就是重绘。

感谢 lijibing 大佬指出问题

- 字体样式等

2. 回流（Reflow）

回流（也称为布局重排）是指当元素的尺寸、位置或其他影响其布局的属性发生变化时，浏览器需要重新计算元素的布局，并重新构建渲染树（Render Tree）的过程。在回流发生时，涉及到的元素及其后代会被重新计算并绘制，这通常会导致性能下降。常见的回流操作包括：

• 更改元素的尺寸（如设置 width、height、padding、border、margin）。
• 添加或删除可见的DOM元素（包括添加或删除元素）。
• 修改元素的内容（如文本变化、数量，图片数量、大小、字体大小）。
• 改变视口（如窗口缩放、滚动等）。
• 页面初始渲染。
• 浏览器窗口大小改变。
• 激活CSS伪类（如 :hover）。
• 查询某些属性或调用某些方法（如 offsetWidth、scrollTop 等时会引发回流）。

值得注意的是，回流一定会引起重绘，但重绘不一定会导致回流。
例如，当你改变一个元素的颜色时，浏览器只会进行重绘操作；但是当你改变一个元素的宽度时，浏览器会进行回流操作。

二、回流的影响范围

回流的影响范围可分为全局和局部。全局回流会影响整个页面的布局，导致重新计算所有元素的样式和位置；而局部回流只会影响某些特定元素及其后代。

回流的成本通常比重绘大得多，因此我们应该尽量减少回流操作，以降低页面性能消耗。

三、如何优化回流

要提高性能，我们需要减少回流的发生频率，特别是控制回流的次数和影响范围。以下是几种有效的优化方案：

1. 减少回流次数

核心观念是尽量集中样式修改，避免频繁操作DOM。

• 样式集中处理：将样式的修改集中到一个步骤中，而不是逐个修改。这可以通过创建一个样式数组，通过更改一个元素的 class 来实现样式的切换，从而减少操作次数。

// 1. 不集中处理样式（直接修改样式属性）
document.getElementById("update").addEventListener("click", () => {const boxes = document.querySelectorAll(".box");boxes.forEach((box) => {box.style.width = "200px"; // 直接修改样式属性box.style.height = "200px";box.style.backgroundColor = "red";box.style.transform = "translateX(50px)";});
});// 1. 减少回流次数：通过集中处理样式
document.getElementById("update").addEventListener("click", () => {const boxes = document.querySelectorAll(".box");boxes.forEach((box) => {box.classList.add("new-style"); // 通过添加类名来集中更新样式});
});

• 通过变量存储调用 offsetWidth 结果：当需要多次获取元素的布局信息（如 offsetWidth），应将其存储在变量中以避免重复计算，从而减少回流。

// 2. 不使用变量存储 `offsetWidth` 结果（多次调用 `offsetWidth`）
document.getElementById("addBox").addEventListener("click", () => {const container = document.getElementById("container");console.log("Container Width:", container.offsetWidth); // 多次调用 offsetWidthconsole.log("Container Width:", container.offsetWidth); // 多次调用 offsetWidthconsole.log("Container Width:", container.offsetWidth); // 多次调用 offsetWidthconst newBox = document.createElement("div");newBox.className = "box new-style";container.appendChild(newBox);
});// 2. 使用变量存储调用 offsetWidth 结果：避免重复计算  
const container = document.getElementById('container');  
const containerWidth = container.offsetWidth;  // 只计算一次  
console.log('Container Width:', containerWidth); // 输出容器宽度 

2. 减少回流范围

核心观念是通过精简涉及回流的DOM操作来减小影响范围。常见减少回流范围的操作包括：

• DOM离线操作：在进行多次DOM更新时，可以使用文档片段（DocumentFragment）来批量更新DOM，避免频繁的回流。

// 3. DOM 离线操作：使用文档片段添加多个元素  
document.getElementById('addBox').addEventListener('click', () => {  const fragment = document.createDocumentFragment();  const newBox = document.createElement('div');  newBox.className = 'box new-style'; // 直接添加样式类  fragment.appendChild(newBox);  // 一次性添加，避免多次回流  container.appendChild(fragment);  
});// 3. 不使用文档片段（直接添加元素到 DOM）
document.getElementById("addBox").addEventListener("click", () => {const container = document.getElementById("container");const newBox = document.createElement("div");newBox.className = "box new-style";container.appendChild(newBox); // 直接添加元素到 DOMconst newBox2 = document.createElement("div");newBox2.className = "box new-style";container.appendChild(newBox2); // 直接添加元素到 DOMconst newBox3 = document.createElement("div");newBox3.className = "box new-style";container.appendChild(newBox3); // 直接添加元素到 DOM
});

• 脱离文档流：对于一些大型操作，使用绝对定位或固定定位可以将元素脱离文档流，从而减少回流的影响。

// 4. 不脱离文档流（使用默认的文档流布局）
const floatingBox = document.createElement("div");
floatingBox.className = "box";
floatingBox.style.top = "150px"; // 位置
floatingBox.style.left = "150px"; // 位置
document.body.appendChild(floatingBox); // 直接添加到文档中，不脱离文档流 // 4. 脱离文档流：使用绝对定位可减少回流影响  
const floatingBox = document.createElement('div');  
floatingBox.className = 'box';  
floatingBox.style.position = 'absolute'; // 脱离文档流  
floatingBox.style.top = '150px'; // 位置  
floatingBox.style.left = '150px'; // 位置  
document.body.appendChild(floatingBox); // 直接添加到文档中