HTML5 Canvas 性能 - 计算每秒循环/帧数

我知道以前有人问过一些类似的问题，例如：在JS中检查FPS？ https://stackoverflow.com/questions/4787431/check-fps-in-js- 这在某种程度上确实有效，我能够找出每个循环需要多长时间才能完成。

但我正在寻找的是更具可读性和可控性的东西。我希望能够设置 FPS 计数器的刷新率，使其变慢，以便人类可读，或者与应用程序运行的速度一样快，这样我就可以在某种速度计上使用它。

无论如何，这是我现在拥有的代码：

var lastLoop = new Date().getTime();

function updateStage()
{   
    clearCanvas();
    updateStageObjects();
    drawStageObjects();     

    var thisLoop = new Date().getTime(); 
    var fps = (thisLoop - lastLoop);

    $('#details').html(fps);

    lastLoop = thisLoop;
    iteration = setTimeout(updateStage, 1);
}

1. 我将 setTimeout 函数的速度设置为 1 毫秒是否正确？我想这只会让它尽可能快地循环。

2. 我应该每 100 帧左右计数一次，找出运行 100 帧需要多少毫秒，然后计算一下如果毫秒为 1000，它会执行多少帧？这个计算会是什么？

3. 为了使结果更准确，我猜我需要显示平均值，因为一帧可能会有很大的变化，我应该怎么做？

非常感谢任何提示。

Thanks.

1. 请注意，更新输出的速度越快，对测量的影响就越大。尽管数量很少，但除非需要更快，否则我会尝试每秒更新一次或更少的 fps 输出。

2. 我喜欢对结果使用低通滤波器，这样临时的干扰就不会太强烈地影响值。这比移动平均值更容易计算和编写，并且不存在总体平均值的问题，即您的“当前”读数受到整个运行期间总体性能的影响（例如启动期间的异常读数）。

总而言之，我通常测量 FPS 的方法如下：

var fps = 0, now, lastUpdate = (new Date)*1;

// The higher this value, the less the FPS will be affected by quick changes
// Setting this to 1 will show you the FPS of the last sampled frame only
var fpsFilter = 50;

function drawFrame(){
  // ... draw the frame ...

  var thisFrameFPS = 1000 / ((now=new Date) - lastUpdate);
  if (now!=lastUpdate){
    fps += (thisFrameFPS - fps) / fpsFilter;
    lastUpdate = now;
  }

  setTimeout( drawFrame, 1 );
}

var fpsOut = document.getElementById('fps');
setInterval(function(){
  fpsOut.innerHTML = fps.toFixed(1) + "fps";
}, 1000);