JS `requestAnimationFrame` 回调中的性能陷阱与优化建议

各位前端的英雄们，大家好！今天咱们来聊聊 requestAnimationFrame 这个看似简单却暗藏玄机的 API。它就像咱们前端界的“老好人”，总是尽职尽责地把任务安排在浏览器刷新之前执行。但“老好人”也有脾气，用不好照样让你网站卡成 PPT。所以，今天咱们就来深挖一下 requestAnimationFrame 的那些坑，以及如何优雅地避开它们。

一、requestAnimationFrame 是个啥？

简单来说，requestAnimationFrame(callback) 就是告诉浏览器：哥们，我想在下次重绘之前执行一段 JavaScript 代码。这个 callback 函数会在浏览器准备好下一次屏幕更新时被调用。

为啥要用它？因为它能让你的动画更流畅，更省电。想象一下，你用 setInterval 或者 setTimeout 做动画，它们不考虑浏览器的刷新频率，傻乎乎地按你设定的时间间隔执行，结果可能导致：

丢帧： 浏览器还没准备好，你就让它更新画面，结果就是画面一卡一卡的。
浪费资源： 浏览器正忙着干别的，你还硬要它更新画面，白白浪费 CPU 和电量。

requestAnimationFrame 就不一样了，它会和浏览器的刷新频率同步，确保你的动画在最佳时机执行。一般来说，浏览器的刷新频率是 60Hz，也就是每秒刷新 60 次。所以，requestAnimationFrame 的回调函数大约每 16.7 毫秒执行一次。

二、requestAnimationFrame 的常见坑

requestAnimationFrame 虽然好处多多，但用不好也容易掉坑里。下面咱们就来盘点一下常见的坑：

回调函数执行时间过长

这是最常见的坑。requestAnimationFrame 的回调函数应该尽可能地轻量级，避免执行耗时的操作。如果你的回调函数执行时间超过了 16.7 毫秒，就会导致掉帧，影响动画的流畅性。

例子：

function myAnimation() {
  // 模拟耗时操作
  for (let i = 0; i < 10000000; i++) {
    // 空循环，啥也不干，就是耗时间
  }

  // 更新 UI
  element.style.transform = `translateX(${x}px)`;
  x++;

  requestAnimationFrame(myAnimation);
}

let x = 0;
const element = document.getElementById('myElement');
requestAnimationFrame(myAnimation);

问题： 上面的代码中，for 循环会阻塞主线程，导致 myAnimation 函数执行时间过长，超过了 16.7 毫秒。

优化建议：

分解任务： 将耗时操作分解成多个小任务，每次 requestAnimationFrame 只执行一部分。
使用 Web Workers： 将耗时操作放到 Web Workers 中执行，避免阻塞主线程。
优化算法： 尽可能地优化你的算法，减少计算量。

频繁读写 DOM

在 requestAnimationFrame 的回调函数中频繁读写 DOM 也会导致性能问题。每次读写 DOM 都会触发浏览器的重排（reflow）和重绘（repaint），这是一项非常耗时的操作。

例子：

function myAnimation() {
  for (let i = 0; i < 100; i++) {
    // 频繁读取 DOM 属性
    const width = element.offsetWidth;
    const height = element.offsetHeight;

    // 频繁修改 DOM 属性
    element.style.width = `${width + 1}px`;
    element.style.height = `${height + 1}px`;
  }

  requestAnimationFrame(myAnimation);
}

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

问题： 上面的代码中，每次循环都会读取 offsetWidth 和 offsetHeight，然后修改 width 和 height，这会导致频繁的重排和重绘。

优化建议：

批量读写： 先读取所有需要的 DOM 属性，然后进行计算，最后一次性地更新 DOM。
使用 CSS Transforms： 尽可能地使用 CSS Transforms 来实现动画，避免直接修改元素的 width、height 等属性。Transforms 不会触发重排，只会触发重绘，性能更好。
使用 DocumentFragment： 如果你需要创建大量的 DOM 元素，可以使用 DocumentFragment 来减少重排和重绘的次数。

忘记取消 requestAnimationFrame

如果你启动了一个 requestAnimationFrame 循环，但是忘记在不需要的时候取消它，就会导致内存泄漏，最终影响性能。

例子：

function myAnimation() {
  // ...

  requestAnimationFrame(myAnimation);
}

requestAnimationFrame(myAnimation);

// 忘记取消 requestAnimationFrame
// 结果：myAnimation 会一直执行下去，即使你不再需要它了

问题： 上面的代码中，myAnimation 会一直执行下去，即使你不再需要它了。

优化建议：

使用 cancelAnimationFrame： 在不需要 requestAnimationFrame 循环的时候，一定要使用 cancelAnimationFrame 来取消它。

let animationId;

function myAnimation() {
  // ...

  animationId = requestAnimationFrame(myAnimation);
}

animationId = requestAnimationFrame(myAnimation);

// 在不需要的时候取消 requestAnimationFrame
cancelAnimationFrame(animationId);

过度使用 requestAnimationFrame

虽然 requestAnimationFrame 很好，但也不是越多越好。如果你在同一个页面上启动了太多的 requestAnimationFrame 循环，也会导致性能问题。

例子：

// 启动 100 个 requestAnimationFrame 循环
for (let i = 0; i < 100; i++) {
  requestAnimationFrame(function() {
    // ...
  });
}

问题： 上面的代码中，启动了 100 个 requestAnimationFrame 循环，这会给浏览器带来很大的压力。

优化建议：

合并循环： 尽可能地将多个 requestAnimationFrame 循环合并成一个。
减少循环： 仔细考虑你的动画逻辑，看看是否真的需要这么多的 requestAnimationFrame 循环。

三、requestAnimationFrame 的优化技巧

除了避免上述的坑之外，还有一些优化技巧可以帮助你更好地使用 requestAnimationFrame：

使用 performance.now() 获取更精确的时间戳

requestAnimationFrame 的回调函数会接收一个时间戳作为参数，这个时间戳表示回调函数执行的时间。但是，这个时间戳的精度可能不够高，导致动画出现抖动。你可以使用 performance.now() 来获取更高精度的时间戳。

function myAnimation(timestamp) {
  // 使用 performance.now() 获取更高精度的时间戳
  const now = performance.now();

  // ...

  requestAnimationFrame(myAnimation);
}

requestAnimationFrame(myAnimation);

使用 will-change 属性

will-change 属性可以告诉浏览器，元素将会发生哪些变化。这可以帮助浏览器提前优化，提高动画性能。

#myElement {
  will-change: transform; /* 告诉浏览器，元素将会发生 transform 变化 */
}

使用 OffscreenCanvas

OffscreenCanvas 可以在后台线程中进行绘制，避免阻塞主线程。这可以提高动画性能，尤其是在绘制复杂图形的时候。

// 创建一个 OffscreenCanvas
const offscreenCanvas = new OffscreenCanvas(width, height);
const offscreenContext = offscreenCanvas.getContext('2d');

// 在 OffscreenCanvas 上进行绘制
function drawOffscreen() {
  // ...
}

// 将 OffscreenCanvas 的内容绘制到屏幕上
function myAnimation() {
  drawOffscreen();
  context.drawImage(offscreenCanvas, 0, 0);

  requestAnimationFrame(myAnimation);
}

requestAnimationFrame(myAnimation);

使用 IntersectionObserver

如果你只需要在元素进入或离开视口时才执行动画，可以使用 IntersectionObserver 来监听元素是否可见。这可以避免不必要的动画计算，提高性能。

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素进入视口，启动动画
      requestAnimationFrame(myAnimation);
    } else {
      // 元素离开视口，停止动画
      cancelAnimationFrame(animationId);
    }
  });
});

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

四、表格总结

陷阱	原因	优化建议
回调函数执行时间过长	阻塞主线程，导致掉帧	分解任务、使用 Web Workers、优化算法
频繁读写 DOM	触发重排和重绘，非常耗时	批量读写、使用 CSS Transforms、使用 `DocumentFragment`
忘记取消 `requestAnimationFrame`	内存泄漏，影响性能	使用 `cancelAnimationFrame`
过度使用 `requestAnimationFrame`	浏览器压力过大	合并循环、减少循环
时间戳精度不够	动画抖动	使用 `performance.now()`
元素变化频繁	浏览器需要频繁地重新计算样式和布局	使用 `will-change` 属性告诉浏览器元素将会发生哪些变化，以便浏览器提前优化
复杂图形绘制	在主线程中绘制复杂图形会阻塞主线程，导致动画卡顿	使用 `OffscreenCanvas` 在后台线程中进行绘制
不可见元素动画	对不可见元素执行动画会浪费资源	使用 `IntersectionObserver` 监听元素是否可见，只在元素可见时才执行动画

五、写在最后

requestAnimationFrame 是一个强大的 API，但只有掌握了它的特性和使用技巧，才能真正发挥它的威力。希望今天的分享能帮助大家更好地使用 requestAnimationFrame，打造更流畅、更高效的 Web 应用。记住，前端优化之路永无止境，让我们一起努力，成为更优秀的“攻城狮”！感谢大家的聆听！

发表回复 取消回复

发表回复取消回复