CSS计算样式（Computed Style）的开销：`getComputedStyle`触发的样式重算 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

CSS 计算样式（Computed Style）的开销：`getComputedStyle` 触发的样式重算

大家好，今天我们来深入探讨一个前端性能优化中经常被忽视，但又非常重要的主题：CSS 计算样式（Computed Style）的开销，以及 getComputedStyle 如何触发样式重算，并最终影响页面的渲染性能。

什么是 CSS 计算样式（Computed Style）？

简单来说，CSS 计算样式是指浏览器最终应用到 HTML 元素上的所有 CSS 属性的最终值。这个值是在浏览器解析、层叠、继承和应用 CSS 规则之后得出的。它不像你在 CSS 文件中定义的那样，它包含了所有经过计算的，可供浏览器直接使用的样式信息。

例如，你在 CSS 中定义了一个元素的 font-size: 16px;，但如果父元素设置了 font-size: 1.2em;，那么子元素的计算样式中的 font-size 就可能不是 16px，而是经过计算后的 19.2px。

`getComputedStyle` 的作用

getComputedStyle 是一个 JavaScript API，它允许我们访问一个元素的计算样式。它返回一个 CSSStyleDeclaration 对象，该对象包含了元素的所有 CSS 属性及其计算值。

语法:

const element = document.getElementById('myElement');
const computedStyle = window.getComputedStyle(element);

// 获取某个属性的计算值
const fontSize = computedStyle.fontSize;
console.log(fontSize); // 例如： "16px"

参数:

element: 要获取计算样式的 HTML 元素。
pseudoElt (可选): 指定要获取计算样式的伪元素 (例如 "::before" 或 "::after"）。如果省略或为 null，则返回元素的计算样式。

`getComputedStyle` 如何触发样式重算（Reflow）？

getComputedStyle 本身并不会直接触发重排（Reflow）。然而，它通常是导致重排的原因之一。这涉及到浏览器渲染引擎的工作流程，我们需要了解一些关键概念。

浏览器渲染引擎的工作流程（简化版）:

解析 HTML 和 CSS: 浏览器解析 HTML 构建 DOM 树，解析 CSS 构建 CSSOM 树。
渲染树（Render Tree）: 结合 DOM 树和 CSSOM 树，生成渲染树。渲染树只包含需要显示的节点，以及这些节点应用的样式。
布局（Layout/Reflow）: 计算渲染树中每个节点的几何属性（位置、大小等）。
绘制（Paint）: 将渲染树中的节点绘制到屏幕上。

getComputedStyle 的触发机制:

当我们调用 getComputedStyle 时，浏览器需要返回元素的计算样式。为了得到这个结果，浏览器需要确保 DOM 树和 CSSOM 树是最新的，并且已经完成了样式计算。

如果 DOM 树或 CSSOM 树发生了改变 (例如，添加、删除、修改了 DOM 节点或 CSS 规则)，或者元素的样式受到其他元素影响 (例如，继承关系), 浏览器需要重新计算样式。
更重要的是，如果浏览器尚未完成布局（Layout/Reflow）过程，那么为了提供正确的计算样式值，getComputedStyle 会强制浏览器立即进行布局。 换句话说，浏览器会暂停当前的 JavaScript 执行，完成布局计算，然后才能返回 getComputedStyle 的结果。

这就是 getComputedStyle 间接触发重排的原因。它本身不是直接触发者，而是催化剂，迫使浏览器提前执行布局操作，以便提供所需的信息。

举例说明:

<!DOCTYPE html>
<html>
<head>
<style>
  #myElement {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>
</head>
<body>
  <div id="myElement"></div>
  <script>
    const element = document.getElementById('myElement');

    // 修改元素的样式
    element.style.width = '200px';

    // 此时，浏览器可能还没有进行布局计算
    // 调用 getComputedStyle 会强制浏览器立即进行布局
    const computedStyle = window.getComputedStyle(element);
    const width = computedStyle.width;
    console.log(width); // "200px"
  </script>
</body>
</html>

在这个例子中，我们首先修改了元素的宽度。如果接下来立即调用 getComputedStyle，浏览器很可能还没有进行布局计算来更新元素的几何属性。因此，getComputedStyle 会强制浏览器执行布局，才能返回正确的宽度值。

样式重算（Recalculation）和重排（Reflow/Layout）的区别

虽然我们经常将它们联系在一起，但它们是不同的概念。

样式重算（Recalculation）: 浏览器重新计算哪些元素需要应用哪些样式，以及这些样式的最终值。这是在 DOM 树和 CSSOM 树发生改变时发生的。
重排（Reflow/Layout）: 浏览器重新计算渲染树中每个元素的几何属性 (位置、大小等)。这通常在样式重算之后发生，但也可能由其他因素触发，例如窗口大小改变。

样式重算总是发生在重排之前，但重排并不一定需要样式重算。例如，只改变元素的 opacity 属性，不需要重新计算布局，只需要重新绘制。

为什么重排（Reflow）会影响性能？

重排是一个非常耗费性能的操作，因为它涉及到重新计算页面中所有元素的几何属性。如果页面结构复杂，元素数量庞大，那么重排的开销会非常显著。

重排会影响性能的原因:

计算量大: 需要遍历渲染树，计算每个元素的几何属性。
级联效应: 一个元素的重排可能会导致其父元素、子元素甚至兄弟元素的重排，形成级联效应。
阻塞主线程: 重排操作通常在主线程上执行，会阻塞 JavaScript 的执行，导致页面卡顿。

如何避免或减少 `getComputedStyle` 触发的重排？

了解了 getComputedStyle 的工作原理，以及重排对性能的影响，我们就可以采取一些措施来避免或减少其带来的性能开销。

减少 DOM 操作: 频繁的 DOM 操作是导致样式重算和重排的常见原因。尽量减少 DOM 操作的次数，可以使用 DocumentFragment 或模板字符串来批量更新 DOM。

示例:

// 糟糕的写法： 每次循环都插入一个元素
const list = document.getElementById('myList');
for (let i = 0; i < 100; i++) {
  const item = document.createElement('li');
  item.textContent = `Item ${i}`;
  list.appendChild(item);
}

// 更好的写法： 使用 DocumentFragment 批量插入元素
const list = document.getElementById('myList');
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const item = document.createElement('li');
  item.textContent = `Item ${i}`;
  fragment.appendChild(item);
}
list.appendChild(fragment);

批量修改样式: 避免逐个修改元素的样式，可以使用 CSS 类名或 CSS 变量来批量修改样式。

示例:

// 糟糕的写法： 逐个修改样式
const element = document.getElementById('myElement');
element.style.width = '200px';
element.style.height = '300px';
element.style.backgroundColor = 'blue';

// 更好的写法： 使用 CSS 类名
const element = document.getElementById('myElement');
element.classList.add('new-style');

// CSS
.new-style {
  width: 200px;
  height: 300px;
  background-color: blue;
}

缓存计算样式: 如果需要多次访问同一个元素的同一个计算样式，可以将其缓存起来，避免重复调用 getComputedStyle。

示例:

const element = document.getElementById('myElement');
let cachedWidth = null;

function getElementWidth() {
  if (cachedWidth === null) {
    const computedStyle = window.getComputedStyle(element);
    cachedWidth = computedStyle.width;
  }
  return cachedWidth;
}

// 多次使用 cachedWidth
console.log(getElementWidth());
console.log(getElementWidth());
console.log(getElementWidth());

注意: 缓存计算样式需要谨慎，如果元素的样式发生了改变，需要及时更新缓存。

避免在循环中访问计算样式: 在循环中访问计算样式会导致大量的重排，应该尽量避免。

示例:

// 糟糕的写法： 在循环中访问计算样式
const elements = document.querySelectorAll('.myElement');
for (let i = 0; i < elements.length; i++) {
  const element = elements[i];
  const computedStyle = window.getComputedStyle(element);
  const width = computedStyle.width;
  console.log(width);
}

// 更好的写法： 提前获取所有元素的宽度
const elements = document.querySelectorAll('.myElement');
const widths = [];
for (let i = 0; i < elements.length; i++) {
  const element = elements[i];
  const computedStyle = window.getComputedStyle(element);
  widths.push(computedStyle.width);
}

// 在循环中使用预先获取的宽度
for (let i = 0; i < elements.length; i++) {
  console.log(widths[i]);
}

使用 requestAnimationFrame: 将需要修改 DOM 并在下一帧绘制的操作放在 requestAnimationFrame 回调函数中执行，可以减少重排的次数。 requestAnimationFrame 会将多个 DOM 操作合并到一次重排中。

示例:
```
const element = document.getElementById('myElement');

requestAnimationFrame(() => {
  element.style.width = '200px';
  element.style.height = '300px';
  element.style.backgroundColor = 'blue';
});
```
使用 CSS Containment: CSS Containment 是一种用于限制样式、布局和绘制影响的技术。通过使用 contain 属性，可以告诉浏览器某个元素是独立的，其内部的改变不会影响到外部元素。

示例:
```
#myElement {
  contain: layout; /* 只限制布局的影响 */
}
```
contain 属性有以下几个值：
- none: 默认值，表示没有限制。
- strict: 等同于 contain: size layout paint。
- content: 等同于 contain: layout paint。
- size: 表示元素的大小是独立的，元素的尺寸不会影响到外部元素。
- layout: 表示元素的布局是独立的，元素的布局不会影响到外部元素。
- paint: 表示元素的绘制是独立的，元素的绘制不会影响到外部元素。
避免强制同步布局（Forced Synchronous Layout）: 强制同步布局是指在浏览器准备绘制下一帧之前，强制浏览器进行布局计算。这通常发生在以下情况下：
- 先修改了 DOM，然后立即读取元素的布局属性 (例如 offsetWidth, offsetHeight, offsetTop, offsetLeft, clientWidth, clientHeight, getComputedStyle)。
示例:
```
const element = document.getElementById('myElement');

element.style.width = '200px';

// 强制同步布局：浏览器需要立即进行布局计算才能提供 offsetWidth 的值
const width = element.offsetWidth;
console.log(width);
```
避免强制同步布局的方法是，尽量将读取和写入操作分离，或者使用 requestAnimationFrame。

性能测试和分析

仅仅了解理论知识是不够的，我们需要使用工具来测量和分析 getComputedStyle 带来的性能影响。

常用的性能测试工具:

Chrome DevTools: Chrome DevTools 提供了强大的性能分析工具，可以帮助我们识别性能瓶颈。可以使用 Timeline 面板来记录页面加载和交互过程中的性能数据，包括重排、重绘、脚本执行等。
Lighthouse: Lighthouse 是一个自动化工具，可以用来评估网页的性能、可访问性、最佳实践和 SEO。它可以提供详细的性能报告，包括重排的次数和耗时。

如何使用 Chrome DevTools 分析性能:

打开 Chrome DevTools (F12 或右键 -> 检查)。
选择 Performance 面板。
点击 Record 按钮开始录制。
执行需要测试的操作。
点击 Stop 按钮停止录制。
分析录制结果。

在录制结果中，可以查看以下信息：

Frames: 每一帧的渲染时间。
Main: 主线程的活动，包括脚本执行、样式计算、布局和绘制。
Raster: 栅格化操作。

通过分析这些信息，可以找到性能瓶颈，并采取相应的优化措施。

总结

getComputedStyle 本身不会直接引发重排，但它作为一个“催化剂”，会促使浏览器提前执行布局计算，以提供所需的计算样式值。频繁调用 getComputedStyle，特别是在循环中或在修改 DOM 后立即调用，会导致大量的重排，严重影响页面性能。

通过减少 DOM 操作、批量修改样式、缓存计算样式、使用 requestAnimationFrame 和 CSS Containment 等技术，可以有效地避免或减少 getComputedStyle 触发的重排，提升页面的渲染性能。同时，利用 Chrome DevTools 等工具进行性能测试和分析，可以帮助我们找到性能瓶颈，并采取更有针对性的优化措施。持续关注渲染性能，提升用户体验。

更多IT精英技术系列讲座，到智猿学院