前端回流与重绘：概念及触发条件

· 浏览次数 : 5

小编点评

前端性能优化：回流与重绘的概念、触发条件及优化方法一、回流（Reflow）与重绘（Repaint）回流（Reflow）和重绘（Repaint）是前端开发中两个重要的性能概念。回流是指当DOM元素的变化导致其几何属性（如尺寸、位置等）发生变化时，浏览器需要重新计算布局的过程。而重绘则是当元素的外观发生变化，但不影响布局时，浏览器重新绘制元素的过程。二、回流与重绘的触发条件 1. 回流触发条件： - 添加、删除、修改DOM元素 - 改变元素的尺寸（宽度、高度、内边距、外边距、边框等） - 改变元素的位置（如使用 top、left、bottom、right、float、clear 等属性） - 改变元素的内容（如文本内容的变化） - 改变元素的显示状态（如 display、visibility、overflow 等属性） - 读取某些属性（如 offsetWidth、offsetHeight、clientWidth、clientHeight、scrollWidth、scrollHeight 等） - 浏览器窗口大小变化 2. 重绘触发条件： - 改变元素的颜色（如 color、background-color、border-color 等） - 改变元素的边框样式（如 border-style、border-width 等） - 改变元素的透明度（如 opacity） - 改变元素的阴影（如 box-shadow） - 面板中内容的变动（如滚动条滚动时，下拉列表选项的变动等）三、回流与重绘的优化方法 1. 尽量减少DOM操作：将多次对DOM的操作合并为一次性操作。 2. 避免频繁访问会触发回流的属性：将需要触发的属性值缓存起来，避免频繁访问。 3. 使用CSS3硬件加速：利用GPU加速，减少回流和重绘的开销。 4. 低频率触发的操作：对于频繁触发的操作（如滚动事件、窗口大小改变事件），可以使用 requestAnimationFrame 或 debounce、throttle 函数进行节流或防抖处理。 5. 合理的样式表结构：将影响范围较大的样式尽量放在外部样式表中，减少内联样式的使用。避免使用过于复杂的选择器，尽量简化选择器的层级。通过以上方法，我们可以有效地减少回流和重绘的次数，从而提升页面性能，提高用户体验。

正文

在前端开发中，性能优化是一个永恒的话题。回流（Reflow）与重绘（Repaint）是两个重要的概念，它们直接影响着页面的渲染性能和用户体验。本文将详细介绍回流与重绘的概念、触发条件及其优化方法。

一、回流（Reflow）（重排）

1.1 概念

回流，又称重排（Reflow），是指当DOM的变化引起元素的几何属性（如尺寸、位置等）变化时，浏览器需要重新计算元素的布局，从而影响页面的渲染树。这是一种较为耗费性能的操作。

1.2 触发条件

以下操作可能会触发回流：

添加、删除、修改DOM元素
改变元素的尺寸（宽度、高度、内边距、外边距、边框等）
改变元素的位置（如使用 top、left、bottom、right、float、clear 等属性）
改变元素的内容（如文本内容的变化）
改变元素的显示状态（如 display、visibility、overflow 等属性）
读取某些属性（如 offsetWidth、offsetHeight、clientWidth、clientHeight、scrollWidth、scrollHeight 等）
浏览器窗口大小变化

二、重绘（Repaint）

2.1 概念

重绘是指当元素的外观（如颜色、背景、边框等）发生变化，但不会影响布局时，浏览器会重新绘制元素以呈现新的外观。相较于回流，重绘的代价较小，但仍会影响性能。

2.2 触发条件

以下操作可能会触发重绘：

改变元素的颜色（如 color、background-color、border-color 等）
改变元素的边框样式（如 border-style、border-width 等）
改变元素的透明度（如 opacity）
改变元素的阴影（如 box-shadow）

三、回流与重绘的优化方法

为了提升页面性能，我们应尽量减少回流和重绘的次数。以下是一些优化建议：

3.1 尽量减少DOM操作

批量修改DOM：将多次对DOM的操作合并为一次性操作。
使用文档片段（DocumentFragment）：在内存中进行DOM操作，然后一次性将其插入文档中。

3.2 避免频繁访问会触发回流的属性

缓存属性值：将会触发回流的属性值缓存起来，避免频繁访问。

const width = element.offsetWidth;
// 使用缓存的 width 进行后续操作

3.3 使用CSS3硬件加速

使用 transform、opacity、filter 等属性进行动画或过渡效果，可以利用GPU加速，减少回流和重绘的开销。

3.4 低频率触发的操作

对于频繁触发的操作（如滚动事件、窗口大小改变事件），可以使用 requestAnimationFrame 或 debounce、throttle 函数进行节流或防抖处理。

3.5 合理的样式表结构

将影响范围较大的样式尽量放在外部样式表中，减少内联样式的使用。
避免使用过于复杂的选择器，尽量简化选择器的层级。