发布于 由admin

解析浏览器如何在重排与重绘中优化样式更新

浏览器样式更新优化：重排与重绘的深度解析

大家好，今天我们来深入探讨浏览器在处理样式更新时，如何通过优化重排（Reflow）和重绘（Repaint）来提升性能。作为Web开发者，理解这些机制对于编写高效的、用户体验良好的网页至关重要。

1. 渲染引擎的工作流程：从HTML到像素

为了理解重排和重绘，我们首先需要了解浏览器渲染引擎的基本工作流程。渲染引擎（例如Chrome的Blink，Firefox的Gecko）负责将HTML、CSS和JavaScript代码转换成用户最终看到的图像。这个过程大致可以分为以下几个步骤：

  1. 解析HTML（Parsing）: 渲染引擎解析HTML文档，构建DOM树（Document Object Model）。DOM树是一个代表HTML文档结构的树形数据结构，每个HTML元素对应一个节点。

  2. 解析CSS（CSS Parsing）: 渲染引擎解析CSS文件（包括外部样式表、内部样式和内联样式），构建CSSOM树（CSS Object Model）。CSSOM树包含所有CSS规则及其选择器和属性值。

  3. 渲染树（Render Tree）构建: 渲染引擎将DOM树和CSSOM树结合起来，构建渲染树。渲染树只包含需要显示的节点，并且每个节点都关联了对应的样式信息。display: none的元素不会出现在渲染树中。

  4. 布局（Layout/Reflow）: 渲染引擎计算渲染树中每个节点的几何位置和大小。这个过程就是布局，也称为重排。重排的目标是确定每个元素在屏幕上的精确位置。

  5. 绘制（Paint/Repaint）: 渲染引擎遍历渲染树，将每个节点绘制到屏幕上。这个过程就是绘制，也称为重绘。绘制的目标是将元素的视觉效果呈现出来。

  6. 合成（Composition）: 对于复杂的页面，渲染引擎可能会将页面分成多个图层（Layers）。然后，合成器（Compositor）将这些图层合并成最终的图像，并显示在屏幕上。

2. 重排（Reflow）：改变布局的代价

重排是指当渲染树中的元素的几何属性发生改变时，浏览器需要重新计算元素的布局。这意味着浏览器需要重新计算元素的宽度、高度、位置等信息。重排通常发生在以下情况：

  • DOM结构修改: 添加、删除或修改DOM节点。
  • 内容改变: 改变元素的内容（例如，修改文本）。
  • 样式修改: 修改元素的盒模型相关的样式（例如，width、height、margin、padding、border）。
  • 位置改变: 改变元素的位置（例如，top、left、position）。
  • 窗口改变: 改变浏览器窗口的大小。
  • 字体改变: 改变字体大小。
  • 激活CSS伪类: 例如 :hover。
  • 脚本操作: 使用 JavaScript 获取某些属性（offsetWidth、offsetHeight、offsetTop、offsetLeft、scrollWidth、scrollHeight、clientWidth、clientHeight、getComputedStyle()）。

重排的代价非常高昂，因为它会触发整个渲染流水线的重新执行，从DOM树到像素的每一个步骤都需要重新计算。更糟糕的是，重排通常会导致后续的重绘。

示例：触发重排的代码

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

// 修改元素的宽度
element.style.width = '200px'; // 触发重排

// 修改元素的高度
element.style.height = '100px'; // 触发重排

// 修改元素的位置
element.style.left = '50px'; // 触发重排

上面的代码会触发三次重排，每次修改一个样式属性都会导致浏览器重新计算布局。

3. 重绘（Repaint）：更新视觉呈现

重绘是指当渲染树中的元素的视觉属性发生改变，但没有影响到布局时，浏览器需要重新绘制元素。这意味着浏览器只需要更新元素的颜色、背景、阴影等视觉效果，而不需要重新计算元素的位置和大小。重绘通常发生在以下情况：

  • 颜色改变: 修改元素的颜色（例如，color、background-color）。
  • 背景改变: 修改元素的背景图像（例如，background-image）。
  • 阴影改变: 修改元素的阴影效果（例如，box-shadow）。
  • 透明度改变: 修改元素的透明度（例如，opacity）。
  • 轮廓改变: 修改元素的轮廓（例如，outline）。
  • 可见性改变: 修改元素的可见性（例如，visibility，注意 display: none 会触发重排）。

重绘的代价相对较低，因为它只需要重新绘制元素，而不需要重新计算布局。但是，频繁的重绘仍然会对性能产生影响。

示例：触发重绘的代码

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

// 修改元素的背景颜色
element.style.backgroundColor = 'red'; // 触发重绘

// 修改元素的颜色
element.style.color = 'white'; // 触发重绘

// 修改元素的透明度
element.style.opacity = '0.5'; // 触发重绘

上面的代码会触发三次重绘，每次修改一个视觉属性都会导致浏览器重新绘制元素。

4. 如何减少重排和重绘：优化策略

了解了重排和重绘的原理后，我们就可以采取一些优化策略来减少它们的发生，从而提升网页性能。

4.1 批量修改样式

避免多次修改单个样式属性，而是将所有需要修改的属性一次性修改。这样可以减少重排和重绘的次数。

错误的做法：

const element = document.getElementById('myElement');
element.style.width = '200px';
element.style.height = '100px';
element.style.backgroundColor = 'red';

正确的做法：

const element = document.getElementById('myElement');
element.style.cssText = 'width: 200px; height: 100px; background-color: red;';

或者使用setAttribute

const element = document.getElementById('myElement');
element.setAttribute('style', 'width: 200px; height: 100px; background-color: red;');

更推荐的方法是使用 CSS 类名：

const element = document.getElementById('myElement');
element.classList.add('new-style'); // 假设new-style类定义了width, height, background-color

在CSS文件中定义.new-style：

.new-style {
  width: 200px;
  height: 100px;
  background-color: red;
}

4.2 离线修改 DOM

如果需要对 DOM 结构进行大量修改，可以先将 DOM 节点从文档流中移除，进行修改后再重新插入到文档流中。这样可以避免多次重排。

  • 方法一：使用 document.createDocumentFragment()

    创建一个文档片段（DocumentFragment），它是一个轻量级的 DOM 节点，可以容纳多个 DOM 节点。在文档片段中进行修改，然后一次性将文档片段插入到文档中。

    const fragment = document.createDocumentFragment();
const list = document.getElementById('myList');

for (let i = 0; i < 100; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    fragment.appendChild(li);
}

list.appendChild(fragment); // 只触发一次重排

  • 方法二：先隐藏元素，修改后再显示

    先将元素隐藏（display: none），进行修改后再显示（display: block）。隐藏元素后，对它的修改不会立即触发重排。注意：这种方法只适用于不需要立即显示修改结果的情况。

    const element = document.getElementById('myElement');
element.style.display = 'none'; // 移除文档流，触发一次重排

// 进行大量修改
element.style.width = '200px';
element.style.height = '100px';
element.style.backgroundColor = 'red';

element.style.display = 'block'; // 重新插入文档流，触发一次重排

    这种方法总共触发两次重排，一次隐藏，一次显示。

  • 方法三：使用 cloneNode()

    克隆一个节点，对克隆的节点进行修改，然后用克隆的节点替换原来的节点。

    const element = document.getElementById('myElement');
const clone = element.cloneNode(true); // 深拷贝
clone.style.width = '200px';
clone.style.height = '100px';
clone.style.backgroundColor = 'red';
element.parentNode.replaceChild(clone, element); // 触发一次重排

4.3 避免频繁读取布局信息

获取布局信息（例如，offsetWidth、offsetHeight、offsetTop、offsetLeft）会导致浏览器立即执行重排，以确保返回的值是最新的。因此，应该避免频繁读取布局信息。

错误的做法：

const element = document.getElementById('myElement');
for (let i = 0; i < 10; i++) {
  element.style.left = element.offsetLeft + 10 + 'px'; // 每次循环都会触发重排
}

正确的做法：

const element = document.getElementById('myElement');
const offset = element.offsetLeft; // 先读取一次布局信息
for (let i = 0; i < 10; i++) {
  element.style.left = offset + (i + 1) * 10 + 'px'; // 只读取一次布局信息
}

4.4 使用 CSS Transforms 和 Opacity

CSS Transforms 和 Opacity 属性可以利用 GPU 加速，它们通常不会触发重排，只会触发重绘或者合成。因此，可以使用它们来实现动画效果，从而提升性能。

  • 使用 transform 替代 top、left

    /* 不好的做法：触发重排 */
.element {
  position: absolute;
  top: 10px;
  left: 20px;
}

/* 好的做法：只触发重绘或合成 */
.element {
  position: absolute;
  transform: translate(20px, 10px);
}

  • 使用 opacity 替代 visibility

    注意：visibility: hidden 会占据空间，而 display: none 不占据空间。如果需要隐藏元素并且不占据空间，仍然需要使用 display: none。

    /* 不好的做法：触发重排 */
.element {
  visibility: hidden;
}

/* 好的做法：只触发重绘 */
.element {
  opacity: 0;
}

4.5 使用 will-change 属性

will-change 属性可以提前告诉浏览器元素将会发生哪些变化，浏览器可以提前进行优化。例如，如果元素将会进行 transform 动画，可以使用 will-change: transform。

.element {
  will-change: transform, opacity; /* 告诉浏览器元素将会改变 transform 和 opacity */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.element:hover {
  transform: translateX(100px);
  opacity: 0.5;
}

注意： 过度使用 will-change 可能会导致浏览器过度优化，反而降低性能。应该只在需要优化的元素上使用 will-change。

4.6 避免使用 Table 布局

Table 布局的渲染性能较差，因为它需要计算整个表格的布局。应该尽量避免使用 Table 布局，而是使用 CSS Grid 或者 Flexbox 布局。

4.7 减少 CSS 选择器的复杂度

复杂的 CSS 选择器会增加浏览器的匹配成本，降低渲染性能。应该尽量减少 CSS 选择器的复杂度，避免使用嵌套过深的选择器。

错误的做法：

#container div.item p span {
  color: red;
}

正确的做法：

.red-text {
  color: red;
}

<span class="red-text">...</span>

4.8 使用硬件加速

利用 GPU 进行渲染可以显著提升性能。CSS Transforms、Opacity、Canvas、WebGL 等都可以利用硬件加速。

4.9 避免强制同步布局

强制同步布局是指 JavaScript 强制浏览器在执行 JavaScript 代码时立即进行布局。这会导致浏览器阻塞 JavaScript 的执行，直到布局完成。应该避免强制同步布局。

示例：强制同步布局的代码

const element = document.getElementById('myElement');

// 强制浏览器立即进行布局
console.log(element.offsetWidth); // 触发重排，强制同步布局

element.style.width = '200px'; // 修改样式后，下一次读取布局信息会再次触发重排

console.log(element.offsetWidth);

更好的做法是避免在修改样式后立即读取布局信息。

4.10 使用 Chrome DevTools 进行性能分析

Chrome DevTools 提供了强大的性能分析工具，可以帮助我们定位性能瓶颈。可以使用 Performance 面板来记录网页的性能，并分析重排和重绘的次数和耗时。

5. 图层（Layers）与合成（Composition）

现代浏览器使用分层渲染技术来提升性能。渲染引擎将页面分成多个图层，每个图层都有自己的渲染上下文。然后，合成器将这些图层合并成最终的图像。

图层的好处：

  • 独立渲染: 每个图层可以独立进行渲染，互不影响。
  • 硬件加速: 某些图层可以利用 GPU 进行加速。
  • 高效合成: 合成器可以高效地将多个图层合并成最终的图像。

哪些元素会创建新的图层？

  • 拥有 3D transforms 的元素: 例如 transform: translate3d(0, 0, 0)。
  • 使用 <video> 和 <canvas> 元素的元素。
  • 通过 CSS filters 创建的元素: 例如 filter: blur(5px)。
  • position: fixed 的元素。
  • will-change 属性设置为特定值的元素: 例如 will-change: transform。
  • opacity 属性小于 1 的元素（在某些浏览器中）。
  • 拥有 z-index 且 z-index 值不为 auto 的定位元素 (relative, absolute, fixed, sticky)。

合成的好处:
改变图层的 transform 或 opacity 不会导致重排或重绘，而是直接触发合成，性能更高。

6. 总结：编写更高效的网页

通过理解浏览器渲染引擎的工作流程，以及重排和重绘的原理，我们可以采取一些优化策略来减少它们的发生，从而提升网页性能。记住，优化的关键在于减少不必要的布局计算和视觉更新，利用GPU加速，并合理使用图层合成。

7. 优化实践：编写高效代码

理解原理之后，更重要的是将这些知识应用到实际开发中。在编写代码时，时刻注意可能触发重排和重绘的操作，并尽量避免它们。通过批量修改样式、离线修改 DOM、使用 CSS Transforms 和 Opacity 等技巧，可以显著提升网页的性能。持续进行性能分析，定位性能瓶颈，并不断优化代码，才能构建出更加高效、流畅的 Web 应用。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注