当前位置：首页 > article >正文

重绘和回流详细介绍

article 2024/11/14 1:13:21

在前端开发中，重绘（Repaint） 和 回流（Reflow） 是浏览器在渲染页面时的两个重要概念。它们涉及到浏览器如何处理 DOM 和 CSSOM（CSS 对象模型）以计算页面的布局和外观。了解这两个概念及其影响对优化网页性能非常重要。

一、回流（Reflow）

回流是指浏览器重新计算元素的几何属性（如位置和尺寸）并更新页面布局的过程。发生回流的情况包括：

添加或删除 DOM 元素：当你在页面上添加或删除元素时，浏览器需要重新计算相关元素的位置和大小。

const newElement = document.createElement('div');
newElement.style.width = '100px';
newElement.style.height = '100px';
document.body.appendChild(newElement); // 添加新元素，将导致回流

改变元素的尺寸：如修改元素的 width、height、padding 或 margin。

const box = document.getElementById('box');
box.style.width = '200px'; // 改变宽度，会导致回流

改变字体或文本内容：例如，通过改变一个元素的文本内容从而影响布局。

const textElement = document.getElementById('text');
textElement.textContent = '新文本'; // 改变文本内容会重新计算布局

视口改变：例如，当用户调整浏览器窗口大小时，整个页面需要重新计算。
改变 display、position 属性：例如，改变元素的显示方式从 none 到 block。

二、重绘（Repaint）

重绘是指在元素的视觉样式发生变化，但不改变其布局的情况下，浏览器重新绘制元素的过程。以下情况会引起重绘：

改变颜色或背景颜色：如修改元素的 background-color 或 color。

const box = document.getElementById('box');
box.style.backgroundColor = 'red'; // 只改变颜色，会导致重绘

添加阴影效果：如 box-shadow 的变化。

box.style.boxShadow = '5px 5px 10px rgba(0,0,0,0.5)'; // 只改变视觉效果，会导致重绘

改变透明度：如使用 opacity 属性。

box.style.opacity = 0.5; // 改变透明度，会导致重绘

变化边框的颜色：

box.style.borderColor = 'blue'; // 只改变边框颜色，会导致重绘

三、回流与重绘的关系

回流会触发重绘：当元素的尺寸、位置等发生变化时，浏览器需要首先进行回流，然后可能会进行重绘。
重绘不会触发回流：对元素的视觉样式进行更改而不改变其布局的操作，只会触发重绘。

四、性能影响

回流的开销通常大于重绘，因为回流可能会影响页面中多个元素的布局和位置。
大量的回流和重绘会导致页面性能下降，影响用户体验。

五、优化建议

为了减少回流和重绘的开销，可以采取以下优化策略：

批量处理 DOM 更改：尽量批量进行 DOM 操作，而不是逐一操作，可以减少回流。例如，在内存中构建一个文档碎片（DocumentFragment）后，再添加到 DOM。

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const newElement = document.createElement('div');
    newElement.textContent = `Item ${i}`;
    fragment.appendChild(newElement);
}
document.body.appendChild(fragment); // 一次性添加所有元素

使用 CSS 类切换：通过 CSS 类来增加或减少样式，而不是单独修改每一个属性，可以减小重排次数。
```
box.classList.add('new-style'); // 使用类切换，而不是逐个更改属性
```
尽量避免读取和写入交替：例如，避免在 DOM 操作中将读取样式和写入样式结合使用，因为这会导致浏览器强制同步。
```
const height = box.offsetHeight; // 读取
box.style.height = height + 'px'; // 写入
```