javascript - 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 会导致输出标记。

Answer 1

整个魔法都发生在 requestAnimationFrame 中，它是一个“黑匣子”，真正完成函数工作所需的一切。它告诉你“现在我有免费的资源来做一个新的图片渲染”

整个事情只是将其包装起来并测量“我现在可以渲染新帧”时刻之间的时间差。举个例子:首先是 2015 年 10 月 24 日，10:55:10.1492169，然后是 2015 年 10 月 24 日，10:55:10.1492525。因此能够绘制新帧的频率是 356 毫秒。如果 cpu 过载更多，它会更高

正如尖锐的提到的那样，它确实占用了一些资源(但是非常少的可怜的资源)，同时显示了一些有用的统计数据，说明它有多少资源来渲染一个新帧——提供了一个非常有用的工具来衡量当前运行的脚本