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

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

为什么它从 2 开始计时，或者为什么这个代码存在，目前还不清楚。我不明白这是如何特别 "helpful" 代码。 requestAnimationFrame() 函数旨在匹配显示器的低级刷新率，在任何现代 LCD 屏幕上都是 60Hz。即使不同，您的代码也确实无能为力。运行这段代码在您制作动画时会增加执行 DOM 更新（更改 "out" 元素的内容）的开销，这会直接影响您自己的动画可以完成的工作量做。

Answer 2

整个魔法都发生在 requestAnimationFrame 中，它是一个 "black box" 真正完成函数工作所需的一切。它告诉你 "now i have free resources to do a new picture render"

整个事情只是将其包装起来并测量 "i can render a new frame now" 个时刻之间的时间差。一个例子：首先是 2015 年 10 月 24 日，10:55:10.1492169，然后是 2015 年 10 月 24 日，10:55:10.1492525。因此能够绘制新帧的频率是 356 毫秒。如果 cpu 超载更多，它会更高

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

requestAnimationFrame：返回帧率的解释

requestAnimationFrame: Explanation of returning a Framerate

javascript

jquery

frame-rate

requestanimationframe