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

Question

我知道之前有过像这样的问题,比如这样:检查JS中的FPS？ - 在某种程度上确实有效,我能够找出每个循环完成的时间.

我正在寻找的是更具可读性和可控性的东西.我希望能够设置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. 为了使结果更准确,我猜我需要显示平均值,因为一帧可以变化很大,我应该怎么做？

任何提示都非常感谢.

谢谢.

Answer 1

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);