requestAnimationFrame: 返回帧速率的解释

Question

我找到了一段有用的代码，并将其用于提供我创建的某些动画的即时帧速率。我希望有人能帮助我理解它是如何运作的？

这是我的代码：

<script src="jquery.js"></script>

window.countFPS = (function () {
  var lastLoop = (new Date()).getMilliseconds();
  var count = 1;
  var fps = 0;

  return function () {
    var currentLoop = (new Date()).getMilliseconds();
    if (lastLoop > currentLoop) {
      fps = count;
      count = 1;
    } else {
      count += 1;
    }
    lastLoop = currentLoop;
    return fps;
  };
}());

(function loop() {
  requestAnimationFrame(function () {
    $('#out').html(countFPS());
    loop();
  });
}());

如果不是很明显，#out指向输出标签。

- Tro

Answer 1

整个魔法都发生在requestAnimationFrame中，它是一个“黑盒子”，真正做了函数运行所需的一切。它告诉你：“现在我有空闲资源来渲染新图片”。

整个过程只是将这些“我现在可以渲染新帧”的时刻之间的时间差测量出来。例如：首先是2015年10月24日10:55:10.1492169，然后是2015年10月24日10:55:10.1492525。因此，能够绘制新帧的频率为356毫秒。如果CPU负载更高，则会更高。

正如Pointy所提到的，它确实会占用一些资源（但非常微不足道），同时显示一些有用的统计信息，指出它有多经常具备渲染新帧的资源——提供了一个非常有用的工具来衡量当前正在运行的脚本的有效性。

- user151496

---

啊！谢谢，现在我明白多了！那是一个很好的解释，谢谢。 - Tro

Answer 2

"countFPS"函数只是比较了上次调用时记录的时间戳的毫秒数和当前调用时的时间戳毫秒数。如果新的毫秒计数器大于上一个计数器，则假定它在同一秒内，因此另一个“帧”被计数（count变量增加）。如果不是，则将计数器重置为1。

为什么它从2开始计数，或者为什么需要这段代码，不清楚。我不认为这是特别“有用”的代码。 requestAnimationFrame（）函数旨在与显示器的低级刷新率匹配，在任何现代液晶屏幕上，刷新频率都为60Hz。即使不同，您的代码也无法改变它。在执行动画时运行此代码会增加执行DOM更新（更改“out”元素的内容）的开销，这直接影响您自己的动画所能完成的工作量。

- Pointy

---

计数器从2开始是一个打字错误，非常抱歉。 - Tro

它的存在只是为了监视当前动画运行的FPS。我使用谷歌的FPS计数器测试了它的结果，似乎相当准确。不过还是感谢你的解释，非常感激。 - Tro

实际上，我仍然不清楚它是如何工作的。显然，它测量了正确的FPS（结果与谷歌FPS计数器相符）。我不确定我是否理解了你的解释。 - Tro