如何利用 JavaScript 中的 requestAnimationFrame 优化动画性能，并避免浏览器重绘和回流？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，晚上好！我是你们的老朋友，今天咱们不聊妹子，聊点硬核的——JavaScript 动画优化，特别是怎么用 requestAnimationFrame 让你的动画丝滑流畅，还能避免浏览器抽风（也就是重绘和回流）。

开场白：动画这玩意儿，水很深

想做出炫酷的网页动画？简单！setInterval 或者 setTimeout 一把梭。但等等，你有没有觉得动画有时候卡卡的，就像喝了假酒一样？这就是浏览器在跟你抗议了。它在说：“你这么搞，我压力很大啊！”

问题就出在 setInterval 和 setTimeout 这些老家伙身上。他们就像一群精力旺盛但脑子不太灵光的工人，不管浏览器当前忙不忙，都一股脑地往 DOM 上招呼。结果就是，浏览器处理不过来，掉帧、卡顿，用户体验直线下降。

所以，我们需要一个更聪明、更体贴的“工头”，也就是 requestAnimationFrame。

第一幕：认识 requestAnimationFrame – 动画界的绅士

requestAnimationFrame (简称 rAF) 是一个浏览器提供的 API，它的作用是告诉浏览器：“嘿，哥们，我有个动画要搞，你能不能在下一次屏幕刷新之前帮我执行一下？”

是不是听起来很温柔？rAF 的好处可不止是温柔，它还有以下几个优点：

智能同步： rAF 会自动与浏览器的刷新频率同步。一般来说，浏览器的刷新频率是 60Hz，也就是说每秒刷新 60 次。rAF 会尽量保证你的动画每秒执行 60 次，从而达到流畅的效果。
节能省电： 当页面不可见时（比如切换到其他标签页），rAF 会自动暂停，从而节省 CPU 资源和电量。
避免掉帧： rAF 会在浏览器空闲时执行动画，从而避免掉帧现象。

第二幕：代码实战 – 让你的动画飞起来

光说不练假把式，咱们直接上代码。

1. 简单的移动动画

假设我们要让一个 div 元素从左向右移动。

const element = document.getElementById('myElement');
let position = 0;

function animate() {
  position += 2; // 每次移动 2 像素
  element.style.left = position + 'px';

  if (position < 500) { // 移动到 500 像素停止
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate); // 启动动画

这段代码很简单，就是不断地改变 div 元素的 left 属性，使其向右移动。关键在于 requestAnimationFrame(animate) 这行代码，它告诉浏览器在下一次刷新之前执行 animate 函数。

2. 更复杂的动画 – 缓动效果

上面的动画太机械了，我们需要让它更自然一点，加入缓动效果。

const element = document.getElementById('myElement');
let startPosition = 0;
let targetPosition = 500;
let currentPosition = 0;
let speed = 0.1; // 缓动系数

function animate() {
  const distance = targetPosition - currentPosition;
  currentPosition += distance * speed;
  element.style.left = currentPosition + 'px';

  if (Math.abs(distance) > 1) { // 当距离小于 1 像素时停止
    requestAnimationFrame(animate);
  } else {
      element.style.left = targetPosition + 'px'; // 确保最终位置正确
  }
}

requestAnimationFrame(animate);

这段代码使用了缓动算法，让动画看起来更加平滑自然。speed 变量控制缓动速度，数值越小，缓动效果越明显。

3. 动画循环 – 无限滚动

如果你想让动画无限循环，可以这样写：

const element = document.getElementById('myElement');
let position = 0;
const containerWidth = 800; // 容器宽度
const elementWidth = 100; // 元素宽度

function animate() {
  position++;
  element.style.left = position + 'px';

  if (position > containerWidth) {
    position = -elementWidth; // 重置位置
  }

  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

这段代码实现了一个简单的无限滚动效果。当元素移动到容器右侧时，将其重置到容器左侧，从而实现循环滚动。

第三幕：避坑指南 – 重绘与回流

光有流畅的动画还不够，我们还要避免浏览器的重绘和回流，否则动画性能依然会受到影响。

什么是重绘 (Repaint) 和回流 (Reflow)？

重绘： 当元素的样式发生改变，但不影响其在文档流中的位置时，浏览器会重新绘制该元素。比如，改变元素的颜色、背景色、字体等等。
回流： 当元素的尺寸、位置或内容发生改变时，浏览器需要重新计算元素的几何属性，并重新构建渲染树。这个过程就叫做回流。回流一定会触发重绘，而重绘不一定会触发回流。

为什么重绘和回流会影响性能？

因为重绘和回流都是非常耗费 CPU 资源的操作。浏览器需要重新计算和渲染页面，这会阻塞主线程，导致页面卡顿。

如何避免重绘和回流？

批量修改 DOM： 避免频繁地修改 DOM 元素。可以将多次修改操作合并成一次。比如，可以使用 DocumentFragment 或者 innerHTML 来批量修改 DOM。

// 糟糕的代码
for (let i = 0; i < 100; i++) {
  const element = document.createElement('div');
  element.textContent = 'Item ' + i;
  document.body.appendChild(element);
}

// 更好的代码
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const element = document.createElement('div');
  element.textContent = 'Item ' + i;
  fragment.appendChild(element);
}
document.body.appendChild(fragment);

使用 CSS transforms 和 opacity： transform 和 opacity 属性通常不会触发回流，而是直接在合成层上进行渲染，性能更高。
```
// 糟糕的代码
element.style.left = position + 'px';

// 更好的代码
element.style.transform = `translateX(${position}px)`;
```

避免读取布局信息： 在修改 DOM 之后，不要立即读取元素的布局信息（比如 offsetWidth、offsetHeight、offsetTop 等等）。因为这会强制浏览器进行回流。

// 糟糕的代码
element.style.width = '100px';
const width = element.offsetWidth; // 强制回流
console.log(width);

// 更好的代码
element.style.width = '100px';
// 延迟读取布局信息，让浏览器有时间优化
setTimeout(() => {
  const width = element.offsetWidth;
  console.log(width);
}, 0);

使用 will-change 属性： will-change 属性可以提前告诉浏览器，元素将会发生哪些变化，从而让浏览器提前做好优化准备。
```
.element {
  will-change: transform, opacity;
}
```

离线修改： 可以先将元素从 DOM 树中移除，进行修改后再重新插入。

const element = document.getElementById('myElement');
const parent = element.parentNode;
const nextSibling = element.nextSibling;

parent.removeChild(element); // 从 DOM 树中移除

// 进行修改
element.style.width = '200px';
element.style.height = '300px';

parent.insertBefore(element, nextSibling); // 重新插入 DOM 树

第四幕：性能监控 – 知己知彼，百战不殆

想要知道你的动画性能如何，最好的办法就是进行性能监控。浏览器提供了强大的开发者工具，可以帮助你分析动画性能瓶颈。

Chrome DevTools Timeline： Chrome 开发者工具的 Timeline 面板可以记录页面加载和运行时的各种事件，包括 JavaScript 执行、渲染、绘制等等。你可以使用 Timeline 面板来分析动画的性能瓶颈，找出耗时操作。
Performance API： Performance API 提供了一组用于测量页面性能的接口。你可以使用 Performance API 来测量动画的执行时间、帧率等等。

第五幕：总结 – 动画优化，永无止境

requestAnimationFrame 是 JavaScript 动画优化的利器，它可以帮助你创建流畅、高效的动画。但是，动画优化是一个持续不断的过程，我们需要不断地学习和实践，才能掌握更多的技巧和方法。

一些进阶技巧：

使用 Canvas： 对于复杂的动画效果，可以使用 Canvas 来进行渲染。Canvas 提供了更强大的绘图能力，可以实现更复杂的动画效果。
使用 WebGL： 如果你需要创建 3D 动画，可以使用 WebGL。WebGL 是一种基于 OpenGL 的 JavaScript API，可以利用 GPU 的强大计算能力来渲染 3D 图形。
使用 Web Workers： 对于计算密集型的动画，可以使用 Web Workers 将计算任务放到后台线程中执行，避免阻塞主线程。

常见问题解答：

问题	解答
为什么不直接使用 CSS 动画？	CSS 动画在某些情况下性能更好，因为浏览器可以对 CSS 动画进行优化。但是，对于复杂的动画效果，JavaScript 动画更加灵活。
requestAnimationFrame 的兼容性如何？	`requestAnimationFrame` 的兼容性很好，主流浏览器都支持。对于不支持 `requestAnimationFrame` 的浏览器，可以使用 `setTimeout` 作为备选方案。
如何取消 requestAnimationFrame？	可以使用 `cancelAnimationFrame()` 函数来取消 `requestAnimationFrame`。

最后，记住一点：优化是迭代的过程，没有银弹。不要为了优化而优化，而是要根据实际情况，找到性能瓶颈，并针对性地进行优化。

希望今天的讲座对大家有所帮助！下次有机会再跟大家分享更多关于 JavaScript 动画的知识。感谢各位的观看！

发表回复 取消回复

发表回复取消回复