JavaScript内核与高级编程之：`JavaScript`的`requestAnimationFrame`：其与浏览器帧同步的工作原理。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，老铁们，早上好！

今天咱们来聊聊JavaScript里一个非常重要的家伙：requestAnimationFrame。别看名字长，其实作用可大了去了，它可是让你的动画丝滑流畅的关键先生。很多人写动画，噼里啪啦一顿操作，结果动画卡成PPT，那感觉，就像便秘一样难受。今天咱们就来搞清楚，requestAnimationFrame到底是个啥玩意儿，它又是怎么跟浏览器一唱一和，让你的动画告别卡顿，走向丝滑的。

一、什么是requestAnimationFrame？

简单来说，requestAnimationFrame是浏览器提供的一个API，它的作用是告诉浏览器你希望执行一个动画，并且请求浏览器在下一次重绘之前调用指定的回调函数来更新动画。

是不是有点绕？没关系，咱们拆开来说：

告诉浏览器你希望执行一个动画： 这就相当于你跟浏览器打个招呼：“嘿，哥们儿，我这有个动画要跑，你帮我安排一下！”
请求浏览器在下一次重绘之前调用指定的回调函数： 浏览器收到你的请求后，会告诉你：“好嘞，没问题！等我下次要刷新屏幕的时候，我一定叫你的回调函数来更新画面。”
更新动画： 你的回调函数里面呢，就是改变元素的位置、大小、颜色等等，让动画动起来的代码。

所以，requestAnimationFrame就像一个调度员，它负责把你的动画代码安排在浏览器刷新屏幕的最佳时机执行，从而保证动画的流畅性。

二、为什么我们需要requestAnimationFrame？

你可能会问：“我直接用setInterval或者setTimeout不行吗？它们也能定时执行代码啊！”

答案是： 不行！

setInterval和setTimeout虽然也能定时执行代码，但是它们有几个致命的缺点：

时间不精确： setInterval和setTimeout的回调函数执行时间并不一定是你设置的间隔时间。因为JavaScript是单线程的，如果主线程正在执行其他任务，那么你的回调函数就只能排队等着，等到主线程空闲下来才能执行。这就会导致你的动画出现卡顿或者掉帧的情况。
浪费性能： 即使浏览器没有要重绘屏幕，setInterval和setTimeout的回调函数仍然会执行。这就相当于你不停地往一个水桶里倒水，即使水已经满了，你还在倒，这不就是浪费吗？
可能会导致页面卡顿： 如果你的回调函数里面执行了大量的计算或者DOM操作，那么就会阻塞主线程，导致页面卡顿。

而requestAnimationFrame就完美地解决了这些问题：

与浏览器刷新同步： requestAnimationFrame的回调函数会在浏览器每次刷新屏幕之前执行，这意味着你的动画代码总是能够以最佳的频率执行，从而保证动画的流畅性。
节省性能： 如果浏览器没有要重绘屏幕，requestAnimationFrame的回调函数就不会执行。这样就可以避免不必要的计算和DOM操作，从而节省性能。
避免页面卡顿： requestAnimationFrame的回调函数是在浏览器空闲的时候执行的，这意味着它不会阻塞主线程，从而避免页面卡顿。

咱们用一张表格来总结一下：

特性	`setInterval`/`setTimeout`	`requestAnimationFrame`
执行时间	不精确	与浏览器刷新同步
性能	浪费	节省
页面卡顿	可能导致	避免

三、 requestAnimationFrame的工作原理：与浏览器帧同步

requestAnimationFrame之所以能够如此优秀，是因为它与浏览器的帧同步机制紧密相关。

咱们先来了解一下什么是浏览器的帧。

浏览器的帧（Frame）

简单来说，浏览器的帧就是浏览器刷新屏幕的最小单位。浏览器会以一定的频率（通常是60帧/秒）刷新屏幕，每一帧都会重新绘制页面。

你可以把浏览器想象成一个放映机，每一帧就是一张幻灯片，放映机以每秒60张的速度播放幻灯片，你看到的就是连续的动画。

而requestAnimationFrame的作用就是告诉浏览器，在下一帧开始绘制之前，执行我的回调函数来更新画面。

浏览器帧同步机制

浏览器的帧同步机制是指浏览器会等待所有需要更新的内容都准备好之后，才会开始绘制下一帧。

这个过程大致如下：

JavaScript执行： 浏览器执行JavaScript代码，包括你的requestAnimationFrame回调函数。
样式计算： 浏览器计算元素的样式，包括元素的尺寸、位置、颜色等等。
布局： 浏览器根据元素的样式计算元素在页面上的位置。
绘制： 浏览器将元素绘制到屏幕上。
合成： 浏览器将多个图层合成到一起，形成最终的画面。

requestAnimationFrame的回调函数会在JavaScript执行阶段执行，这意味着你可以在回调函数里面改变元素的样式，然后浏览器会在样式计算、布局和绘制阶段，根据你的修改来更新画面。

四、 requestAnimationFrame的使用方法

requestAnimationFrame的使用方法非常简单：

requestAnimationFrame(callback);

其中，callback是你的回调函数，它会在下一帧开始绘制之前执行。

requestAnimationFrame会返回一个请求ID，你可以用这个ID来取消动画：

const requestId = requestAnimationFrame(callback);

cancelAnimationFrame(requestId);

五、 requestAnimationFrame的实际应用：创建一个简单的动画

咱们来创建一个简单的动画，让一个元素从左向右移动：

<!DOCTYPE html>
<html>
<head>
  <title>requestAnimationFrame Example</title>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      left: 0;
      top: 50px;
    }
  </style>
</head>
<body>
  <div id="box"></div>

  <script>
    const box = document.getElementById('box');
    let position = 0;
    const speed = 2; // 像素/帧

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

      // 如果元素到达屏幕右侧，停止动画
      if (position > window.innerWidth - box.offsetWidth) {
        position = 0;
        box.style.left = position + 'px';
        //取消动画
        //cancelAnimationFrame(requestId);

        //返回重新开始
        requestAnimationFrame(animate);

        return;
      }

      // 请求下一帧动画
      requestAnimationFrame(animate);
    }

    // 启动动画
    const requestId = requestAnimationFrame(animate);
  </script>
</body>
</html>

在这个例子中，我们定义了一个animate函数，它会不断地改变box元素的位置，并请求下一帧动画。

requestAnimationFrame会保证animate函数在浏览器每次刷新屏幕之前执行，从而保证动画的流畅性。

六、 requestAnimationFrame的最佳实践

在使用requestAnimationFrame的时候，有一些最佳实践可以帮助你写出更高效的动画：

避免在回调函数里面执行大量的计算或者DOM操作： 尽量把计算和DOM操作放在回调函数外面，或者使用Web Workers来执行这些任务。
使用CSS Transitions或者CSS Animations来代替JavaScript动画： CSS Transitions和CSS Animations是浏览器原生支持的动画，它们的性能通常比JavaScript动画更好。
使用transform属性来代替left、top、width、height等属性： transform属性可以利用硬件加速，从而提高动画的性能。
避免频繁地触发重排（Reflow）和重绘（Repaint）： 重排和重绘是浏览器性能的瓶颈，尽量避免频繁地触发它们。

七、 requestAnimationFrame的兼容性

requestAnimationFrame的兼容性非常好，几乎所有的现代浏览器都支持它。

但是，为了兼容一些老版本的浏览器，你可以使用一个polyfill：

(function() {
  var lastTime = 0;
  var vendors = ['webkit', 'moz'];
  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
                               || window[vendors[x]+'CancelRequestAnimationFrame'];
  }

  if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() { callback(currTime + timeToCall); },
        timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };

  if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
}());

这个polyfill会检查浏览器是否支持requestAnimationFrame，如果不支持，就使用setTimeout来模拟requestAnimationFrame的功能。

八、总结

requestAnimationFrame是JavaScript动画中一个非常重要的API，它可以让你写出丝滑流畅的动画。

记住，requestAnimationFrame是与浏览器帧同步的，它会在浏览器每次刷新屏幕之前执行你的回调函数。

希望今天的讲座对你有所帮助！以后写动画，记得用requestAnimationFrame，告别卡顿，走向丝滑！

九、练习题

创建一个动画，让一个元素在页面上循环移动。
创建一个动画，让一个元素淡入淡出。
创建一个动画，让一个元素旋转。
创建一个动画，让多个元素同时移动。
研究一下如何使用transform属性来提高动画的性能。

十、彩蛋

告诉你个秘密，其实requestAnimationFrame除了做动画，还可以用来做一些其他的事情，比如：

优化滚动性能： 你可以使用requestAnimationFrame来优化滚动事件的处理，避免页面卡顿。
延迟执行任务： 你可以使用requestAnimationFrame来延迟执行一些任务，避免阻塞主线程。

总之，requestAnimationFrame是一个非常强大的API，它可以让你做很多有趣的事情。

好啦，今天的讲座就到这里，希望大家多多练习，早日成为动画高手！下课！

各位靓仔靓女，老铁们，早上好！

发表回复 取消回复

发表回复取消回复