CSS `Layout Thrashing` `Microtask Queue` `Animation Frames` 调度分析

咳咳，各位观众老爷们，晚上好！今天咱们聊点前端性能优化的硬货，主题是“CSS Layout Thrashing，Microtask Queue，Animation Frames 调度分析”，保证让大家听完之后，对浏览器渲染机制的理解更上一层楼，以后面试遇到这类问题，也能轻松应对，让面试官直呼内行！

咱们先从最令人头疼的 Layout Thrashing（布局抖动） 说起。

Layout Thrashing：性能杀手

啥是 Layout Thrashing？简单来说，就是浏览器在短时间内反复进行布局（Layout）计算，导致性能下降。这就像你不停地让你的 CPU 从计算加法切换到计算乘法，然后再切回加法，CPU 也得累趴下。

更专业一点的解释是：当我们在 JavaScript 中读取某个元素的布局属性（例如 offsetTop, offsetWidth, clientHeight 等）之后，立即修改了 DOM 结构，导致浏览器需要重新计算布局，然后我们再次读取布局属性，这就会触发新的布局计算。如此循环，就造成了 Layout Thrashing。

举个栗子：

<!DOCTYPE html>
<html>
<head>
<title>Layout Thrashing Example</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin-bottom: 10px;
  }
</style>
</head>
<body>
  <div id="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>
  <script>
    const container = document.getElementById('container');
    const boxes = document.querySelectorAll('.box');

    function layoutThrashingExample() {
      for (let i = 0; i < boxes.length; i++) {
        // 读取布局属性
        const offsetHeight = boxes[i].offsetHeight;
        console.log(`Box ${i + 1} offsetHeight: ${offsetHeight}`);

        // 修改 DOM 结构 (添加新的元素)
        const newBox = document.createElement('div');
        newBox.classList.add('box');
        newBox.textContent = `Box ${boxes.length + 1}`;
        container.appendChild(newBox);
      }
    }

    layoutThrashingExample();
  </script>
</body>
</html>

在这个例子里，我们循环遍历每个 box，先读取 offsetHeight，然后立即添加一个新的 box。每次添加 box 都会导致浏览器重新计算布局，而我们的循环又会立即读取下一个 box 的 offsetHeight，从而触发新的布局计算。这就造成了 Layout Thrashing。

为什么 Layout Thrashing 这么可怕？

因为布局计算是一个非常耗时的操作。浏览器需要遍历整个 DOM 树，计算每个元素的位置和大小。如果频繁进行布局计算，会严重阻塞主线程，导致页面卡顿，用户体验极差。

如何避免 Layout Thrashing？

有几种方法可以避免 Layout Thrashing：

批量读取和写入： 尽量将所有的读取操作放在一起，所有的写入操作放在一起。这样可以减少布局计算的次数。

function optimizedExample() {
  // 1. 读取所有需要的数据
  const offsetHeights = [];
  for (let i = 0; i < boxes.length; i++) {
    offsetHeights.push(boxes[i].offsetHeight);
  }

  // 2. 修改 DOM
  for (let i = 0; i < boxes.length; i++) {
    const newBox = document.createElement('div');
    newBox.classList.add('box');
    newBox.textContent = `Box ${boxes.length + 1}`;
    container.appendChild(newBox);
  }

  // 3. 使用读取的数据
  for (let i = 0; i < offsetHeights.length; i++) {
    console.log(`Box ${i + 1} offsetHeight: ${offsetHeights[i]}`);
  }
}

在这个优化后的例子中，我们先读取所有 box 的 offsetHeight，然后一次性添加所有新的 box，最后再使用读取到的 offsetHeight。这样就避免了在循环中频繁进行布局计算。

使用文档片段（Document Fragment）： 文档片段是一个轻量级的 DOM 节点，可以用来临时存储 DOM 元素。将多个 DOM 元素添加到文档片段中，然后一次性将文档片段添加到 DOM 树中，可以减少布局计算的次数。
```
function fragmentExample() {
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < 5; i++) {
    const newBox = document.createElement('div');
    newBox.classList.add('box');
    newBox.textContent = `Box ${boxes.length + i + 1}`;
    fragment.appendChild(newBox);
  }
  container.appendChild(fragment);
}
```
在这个例子中，我们先将 5 个新的 box 添加到文档片段中，然后一次性将文档片段添加到 container 中。这样可以减少布局计算的次数。
使用 CSS transforms： CSS transforms 可以用来改变元素的位置、大小和旋转角度，而不会触发布局计算。因此，可以使用 CSS transforms 来实现动画效果，而不会导致 Layout Thrashing。
```
.box {
  transition: transform 0.3s ease-in-out;
}

.box:hover {
  transform: translateX(50px); /* 使用 transform 移动元素 */
}
```
在这个例子中，我们使用 CSS transforms 来实现 hover 时的移动效果。这样可以避免触发布局计算，从而提高性能。
使用 requestAnimationFrame： requestAnimationFrame 是一个浏览器 API，可以用来在浏览器下一次重绘之前执行 JavaScript 代码。使用 requestAnimationFrame 可以将 DOM 操作放在下一次重绘之前执行，从而避免 Layout Thrashing。
```
function requestAnimationFrameExample() {
  requestAnimationFrame(() => {
    for (let i = 0; i < boxes.length; i++) {
      const offsetHeight = boxes[i].offsetHeight;
      console.log(`Box ${i + 1} offsetHeight: ${offsetHeight}`);

      const newBox = document.createElement('div');
      newBox.classList.add('box');
      newBox.textContent = `Box ${boxes.length + 1}`;
      container.appendChild(newBox);
    }
  });
}
```
在这个例子中，我们将 DOM 操作放在 requestAnimationFrame 的回调函数中执行。这样可以确保 DOM 操作在下一次重绘之前执行，从而避免 Layout Thrashing。

总结一下，避免 Layout Thrashing 的关键是：

减少布局计算的次数。
将读取和写入操作分开。
使用 CSS transforms 和 requestAnimationFrame。

接下来，我们聊聊 Microtask Queue（微任务队列）。

Microtask Queue：幕后英雄

Microtask Queue 是一个队列，用于存放需要异步执行的微任务。微任务是一种比宏任务（例如 setTimeout, setInterval）更快的异步任务。

常见的微任务包括：

Promise.then() 和 Promise.catch() 的回调函数。
MutationObserver 的回调函数。
queueMicrotask() API。

Microtask Queue 的执行时机：

Microtask Queue 的执行时机是在每个宏任务执行完毕之后，浏览器渲染页面之前。也就是说，浏览器会先执行一个宏任务，然后执行 Microtask Queue 中的所有微任务，然后再渲染页面。

举个栗子：

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

这段代码的执行顺序是：

script start
script end
promise1
promise2
setTimeout

为什么是这个顺序？

首先，浏览器执行 script start 和 script end。
然后，遇到 setTimeout，这是一个宏任务，会被添加到宏任务队列中。
接着，遇到 Promise.resolve().then()，这是一个微任务，会被添加到 Microtask Queue 中。
在当前宏任务执行完毕之后，浏览器会检查 Microtask Queue，发现有两个微任务需要执行。
先执行第一个微任务 promise1，然后执行第二个微任务 promise2。
最后，浏览器渲染页面。
在下一个宏任务中，执行 setTimeout 的回调函数。

Microtask Queue 的优先级：

Microtask Queue 的优先级高于宏任务队列。也就是说，只要 Microtask Queue 中有微任务需要执行，浏览器就会先执行微任务，然后再执行宏任务。

Microtask Queue 的应用场景：

Microtask Queue 可以用来实现一些需要尽快执行的异步任务，例如：

更新 DOM 元素。
执行一些计算密集型的任务。
处理一些错误。

总结一下，Microtask Queue 的关键是：

比宏任务更快。
在每个宏任务执行完毕之后执行。
优先级高于宏任务队列。

最后，我们聊聊 Animation Frames 调度分析。

Animation Frames：动画的灵魂

Animation Frames 是一个浏览器 API，可以用来创建流畅的动画效果。 requestAnimationFrame() 方法告诉浏览器您希望执行一个动画，并且要求浏览器在下一次重绘之前调用指定的回调函数来更新动画。该方法接受一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

为什么需要 Animation Frames？

在没有 Animation Frames 之前，我们通常使用 setTimeout 或 setInterval 来创建动画效果。但是，setTimeout 和 setInterval 的精度不够高，可能会导致动画卡顿。另外，setTimeout 和 setInterval 的回调函数可能会在浏览器没有准备好重绘时执行，导致浪费 CPU 资源。

Animation Frames 可以解决这些问题。 Animation Frames 的回调函数会在浏览器下一次重绘之前执行，可以确保动画的流畅性。另外，Animation Frames 会自动暂停在后台运行的动画，可以节省 CPU 资源。

Animation Frames 的使用方法：

function animate() {
  // 更新动画状态
  // ...

  // 请求下一次重绘
  requestAnimationFrame(animate);
}

// 启动动画
requestAnimationFrame(animate);

在这个例子中，我们定义了一个 animate 函数，该函数会更新动画状态，并请求下一次重绘。然后，我们使用 requestAnimationFrame 来启动动画。

Animation Frames 的优势：

流畅性： Animation Frames 的回调函数会在浏览器下一次重绘之前执行，可以确保动画的流畅性。
节能： Animation Frames 会自动暂停在后台运行的动画，可以节省 CPU 资源。
优化： 浏览器可以对 Animation Frames 进行优化，例如合并多个 Animation Frames 的回调函数，从而提高性能。

Animation Frames 的应用场景：

Animation Frames 可以用来创建各种各样的动画效果，例如：

平滑滚动。
渐变效果。
物理模拟。
游戏动画。

Animation Frames 的注意事项：

Animation Frames 的回调函数应该尽可能简单，避免执行耗时的操作。
Animation Frames 的回调函数应该避免修改 DOM 结构，否则可能会导致 Layout Thrashing。
Animation Frames 的回调函数应该避免死循环，否则可能会导致浏览器崩溃。

Animation Frames 的调度分析：

浏览器会根据屏幕刷新率来调度 Animation Frames 的回调函数。通常情况下，屏幕刷新率是 60Hz，也就是说，浏览器每秒会重绘 60 次。因此，Animation Frames 的回调函数通常每 16.7 毫秒执行一次。

但是，如果浏览器的负载过高，或者屏幕刷新率较低，Animation Frames 的回调函数可能会延迟执行。这可能会导致动画卡顿。

为了避免动画卡顿，我们可以采取以下措施：

优化 Animation Frames 的回调函数，减少执行时间。
使用 CSS transforms 来实现动画效果，避免触发布局计算。
使用 requestIdleCallback 来执行一些不重要的任务，避免阻塞主线程。

总结一下，Animation Frames 的关键是：

创建流畅的动画效果。
在浏览器下一次重绘之前执行。
可以被浏览器优化。

三者之间的关系：

概念	描述	如何影响性能	如何优化
Layout Thrashing	指的是在短时间内，JavaScript 代码反复读取布局属性（如 `offsetWidth`, `offsetHeight`）后立即修改 DOM，导致浏览器频繁进行重排（Reflow/Layout）和重绘（Repaint）。这会阻塞主线程，导致页面卡顿。	频繁的布局计算和重绘消耗大量 CPU 资源，阻塞主线程，导致页面响应缓慢，用户体验差。	1. 批量读写 DOM：先读取所有需要的数据，然后一次性修改 DOM。 2. 使用文档片段（Document Fragment）：将多个 DOM 操作合并到一个文档片段中，然后一次性添加到 DOM 树中。 3. 避免强制同步布局：不要在修改 DOM 后立即读取布局属性。 4. 使用 CSS Transforms 和 Opacity：这些属性的修改通常不会触发重排，只会触发重绘。
Microtask Queue	这是一个队列，用于存放需要异步执行的微任务。常见的微任务包括 `Promise.then/catch/finally` 的回调、`MutationObserver` 的回调等。微任务会在每个宏任务执行完毕后，浏览器渲染页面之前执行。	如果 Microtask Queue 中堆积了大量的微任务，会导致浏览器在渲染页面之前花费大量时间执行微任务，阻塞渲染，造成页面卡顿。	1. 避免在微任务中执行耗时操作：尽量将耗时操作放到宏任务中执行，例如使用 `setTimeout`。 2. 合理使用 Promise：避免创建不必要的 Promise，并尽量减少 Promise 链的长度。 3. 谨慎使用 MutationObserver： MutationObserver 可能会触发大量的微任务，需要谨慎使用。
Animation Frames	`requestAnimationFrame` 是一个浏览器 API，用于在浏览器下一次重绘之前调用指定的回调函数来更新动画。它提供了一个更流畅、更高效的方式来创建动画，避免了使用 `setTimeout/setInterval` 可能导致的卡顿和性能问题。	如果 Animation Frames 的回调函数执行时间过长，超过了浏览器的刷新间隔（通常是 16.7ms），会导致丢帧，造成动画卡顿。	1. 优化动画逻辑：尽量减少 Animation Frames 回调函数中的计算量。 2. 使用 CSS Transitions/Animations：这些 API 通常比 JavaScript 动画更高效，因为它们由浏览器底层实现。 3. 避免在 Animation Frames 回调函数中修改 DOM 结构：这可能会导致重排，影响性能。 4. 使用 Web Workers：将复杂的计算任务放到 Web Workers 中执行，避免阻塞主线程。

总结：

这三个概念都是前端性能优化中非常重要的组成部分。理解它们的工作原理，并采取相应的优化措施，可以有效地提高页面性能，改善用户体验。

好了，今天的讲座就到这里。希望大家有所收获！以后遇到类似问题，能胸有成竹，自信满满。咱们下次再见！ (挥手)

发表回复 取消回复

发表回复取消回复