CSS中的同步布局（Synchronous Layout）：JS读取特定CSS属性触发强制回流 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

CSS 中的同步布局：JS 读取特定 CSS 属性触发强制回流

大家好，今天我们来深入探讨一个前端性能优化中非常重要的概念：CSS 中的同步布局，以及它与 JavaScript 读取 CSS 属性触发强制回流（Forced Reflow/Forced Synchronous Layout）之间的关系。理解并避免这类性能陷阱，对于构建高性能 Web 应用至关重要。

什么是同步布局？

在浏览器渲染页面的过程中，布局（Layout，也常被称为 Reflow 或 Reflow）是其中一个关键步骤。布局阶段负责计算页面上每个元素的大小和位置。这个过程通常是异步的，浏览器会尽可能地将多次 DOM 修改合并起来，一次性进行布局计算，以优化性能。

然而，有时候 JavaScript 代码需要读取某些 CSS 属性（例如 offsetWidth、offsetHeight、offsetTop 等）的值，而这些值只有在布局完成后才能确定。在这种情况下，浏览器会被迫立即进行布局计算，以提供最新的值给 JavaScript。这就是同步布局。

简单来说，同步布局指的是 JavaScript 代码强制浏览器立即执行布局操作，以获取最新的 CSS 属性值。

强制回流：性能的隐形杀手

强制回流是一种特殊的同步布局，它发生在以下情况：

页面已经完成了一次布局（initial layout）。
JavaScript 代码修改了 DOM 结构或 CSS 样式。
JavaScript 代码尝试读取需要重新计算布局才能确定的 CSS 属性。

在这种情况下，浏览器必须立即进行布局计算，以确保 JavaScript 获取到的值是准确的。这种额外的布局计算会阻塞主线程，导致页面渲染延迟，降低用户体验。

想象一下：你正在构建一个复杂的动画，需要在每一帧都调整元素的位置。如果在动画的每一帧中都触发了强制回流，那么动画的性能将会受到严重影响，出现卡顿现象。

触发强制回流的属性

并非所有的 CSS 属性读取都会触发强制回流。只有那些需要通过布局计算才能确定的属性才会触发。常见的触发强制回流的属性包括：

几何属性： offsetWidth、offsetHeight、offsetLeft、offsetTop、clientWidth、clientHeight、clientLeft、clientTop
滚动属性： scrollWidth、scrollHeight、scrollLeft、scrollTop
位置属性： getBoundingClientRect() (返回一个对象，包含了元素的大小和相对于视口的位置)
计算样式： getComputedStyle() (当获取的样式依赖于布局时)

这些属性的值依赖于元素的尺寸、位置、滚动状态等，而这些信息只有在布局完成后才能确定。

示例代码：演示强制回流

为了更好地理解强制回流，我们来看一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Forced Reflow Example</title>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: red;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <p id="output"></p>

  <script>
    const box = document.getElementById('box');
    const output = document.getElementById('output');

    // 修改元素的宽度
    box.style.width = '200px';

    // 读取元素的 offsetWidth，触发强制回流
    const width = box.offsetWidth;

    // 将宽度显示在页面上
    output.textContent = 'Width: ' + width + 'px';
  </script>
</body>
</html>

在这个例子中，我们首先修改了 box 元素的宽度，然后立即读取了它的 offsetWidth 属性。这会导致浏览器立即进行布局计算，以提供最新的宽度值。

如果你打开浏览器的开发者工具，并启用性能分析器，你将会看到在读取 offsetWidth 的时候，触发了布局操作。

如何避免强制回流？

避免强制回流的关键在于：减少在修改 DOM 之后立即读取布局属性的次数。

以下是一些常用的优化技巧：

批量读取： 如果你需要多次读取布局属性，可以先将它们的值缓存起来，然后再进行后续操作。

const box = document.getElementById('box');

// 批量读取布局属性
const width = box.offsetWidth;
const height = box.offsetHeight;
const top = box.offsetTop;
const left = box.offsetLeft;

// 使用缓存的值进行后续操作
console.log('Width:', width, 'Height:', height, 'Top:', top, 'Left:', left);

避免在循环中读取： 在循环中读取布局属性会导致多次强制回流，严重影响性能。

const boxes = document.querySelectorAll('.box');

// 错误的做法：在循环中读取 offsetWidth
for (let i = 0; i < boxes.length; i++) {
  const width = boxes[i].offsetWidth; // 触发强制回流
  console.log('Width:', width);
}

// 正确的做法：先批量读取，再进行循环
const widths = [];
for (let i = 0; i < boxes.length; i++) {
  widths.push(boxes[i].offsetWidth);
}

for (let i = 0; i < widths.length; i++) {
  console.log('Width:', widths[i]);
}

使用文档碎片（DocumentFragment）： 当需要进行大量的 DOM 操作时，可以使用文档碎片来减少回流的次数。文档碎片是一个轻量级的 DOM 节点，可以用来存储多个 DOM 元素，然后一次性地将它们添加到文档中。

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

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

list.appendChild(fragment); // 只触发一次回流

使用 CSS Transforms 代替布局属性： 对于一些简单的动画效果，可以使用 CSS Transforms（例如 translate、scale、rotate）来代替修改布局属性（例如 left、top、width、height）。CSS Transforms 通常由 GPU 加速，性能更好，而且不会触发回流。

/* 使用 translate 代替 left/top */
.box {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(100px, 50px); /* 代替 left: 100px; top: 50px; */
}

/* 使用 scale 代替 width/height */
.box {
  width: 100px;
  height: 100px;
  transform: scale(1.5); /* 代替 width: 150px; height: 150px; */
}

使用 requestAnimationFrame： requestAnimationFrame 是一个浏览器 API，用于在浏览器下一次重绘之前执行动画相关的操作。使用 requestAnimationFrame 可以确保动画的更新与浏览器的刷新同步，从而避免不必要的渲染操作，减少回流的次数。
```
const box = document.getElementById('box');
let x = 0;

function animate() {
  x += 1;
  box.style.transform = `translateX(${x}px)`; // 使用 transform
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);
```
使用 will-change 属性： will-change 属性允许你提前告知浏览器元素将要发生的变化。这样浏览器可以提前进行优化，例如将元素放到独立的渲染层中，从而减少回流的影响。
```
.box {
  will-change: transform; /* 告知浏览器 box 元素将要发生 transform 变化 */
}
```
需要注意的是，过度使用 will-change 可能会导致性能问题，因此应该谨慎使用。只在确实需要优化的元素上使用。

例子：优化动画性能

让我们看一个更完整的例子，演示如何优化动画性能，避免强制回流：

<!DOCTYPE html>
<html>
<head>
  <title>Animation Optimization Example</title>
  <style>
    #container {
      width: 500px;
      height: 200px;
      position: relative;
      border: 1px solid black;
    }

    #ball {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: blue;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      will-change: transform; /* 告知浏览器 ball 元素将要发生 transform 变化 */
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="ball"></div>
  </div>

  <script>
    const container = document.getElementById('container');
    const ball = document.getElementById('ball');
    const containerWidth = container.offsetWidth;
    const ballWidth = ball.offsetWidth;
    let x = 0;
    const speed = 2;

    function animate() {
      x += speed;

      // 循环移动
      if (x > containerWidth - ballWidth) {
        x = 0;
      }

      ball.style.transform = `translate(${x}px, -50%)`; // 使用 transform

      requestAnimationFrame(animate);
    }

    requestAnimationFrame(animate);
  </script>
</body>
</html>

在这个例子中，我们使用 CSS transform 属性来移动小球，而不是修改 left 属性。这样做可以避免触发回流，提高动画的性能。同时，我们使用了 will-change: transform 来告知浏览器该元素即将发生 transform 变化，以便浏览器进行优化。

工具与调试

浏览器开发者工具： 现代浏览器都提供了强大的开发者工具，可以用来分析页面性能，找出导致强制回流的代码。在 Chrome 开发者工具的 "Performance" 面板中，你可以录制页面运行时的性能数据，并查看布局（Layout）操作的耗时。
Lighthouse： Lighthouse 是一个开源的自动化工具，可以用来评估 Web 页面的质量。它会给出性能、可访问性、最佳实践等方面的建议，并指出可能存在的性能问题，包括强制回流。
WebPageTest： WebPageTest 是一个在线的 Web 性能测试工具，可以用来测试页面的加载速度和性能。它会提供详细的性能报告，包括布局操作的次数和耗时。

总结：关注性能，优化体验

通过今天的讲解，我们了解了 CSS 中的同步布局以及 JavaScript 读取特定 CSS 属性触发强制回流的概念。强制回流是 Web 应用性能的隐形杀手，会导致页面渲染延迟，降低用户体验。为了构建高性能的 Web 应用，我们需要避免强制回流，并采取各种优化技巧来提高页面性能。记住，性能优化是一个持续的过程，需要我们不断地学习和实践。

避免强制回流，提升页面性能

减少 DOM 操作后的立即属性读取，利用缓存、文档碎片，以及CSS Transforms和requestAnimationFrame，可以有效避免强制回流，提升页面性能。

工具辅助分析，持续性能优化

浏览器开发者工具、Lighthouse 和 WebPageTest 等工具，可以帮助我们分析页面性能，找出导致强制回流的代码，持续优化Web应用。

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