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.1492 169 ，然后是2015年10月24日，10：55：10.1492 525 。因此，能够绘制新帧的频率是356毫秒。如果cpu超载多了，那就更高了

正如尖锐提到的那样，它确实占用了一些资源（但是可怜的资源却非常微不足道），同时显示了一些有用的统计数据，表明它有多少资源来渲染一个新框架 - 提供了一个非常有用的工具来衡量目前正在运行脚本

Answer 2

“countFPS”函数只是将先前调用时记录的时间戳与其当前调用的时间戳的毫秒进行比较。如果新的毫秒计数器大于前一个计数器，则假定它在同一秒内，因此计算另一个“帧”（count变量递增）。如果没有，则将计数器重置为1.

为什么它在2开始计数器，或者为什么这个代码存在的原因尚不清楚。我不知道这是如何特别“有用”的代码。 requestAnimationFrame()功能旨在匹配显示屏上的低级刷新率，在任何现代LCD屏幕上都是60Hz。即使它不同，你的代码也无法做任何事情。在进行动画制作时运行此代码会增加执行DOM更新的开销（更改“out”元素的内容），这会直接影响您自己的动画可以执行的工作量。

requestAnimationFrame：返回帧率的说明

2 个答案: