HTML5 Canvas性能 - 计算每秒的循环/帧数 [英] HTML5 Canvas performance - calculating loops/frames per second

问题描述

我知道有几个问题像这样的问题，例如：在JS中检查FPS ？ - 在某种程度上确实起了作用，我能够找出每个循环花费多长时间完成。

I know a few questions have been asked like this one before, such as this: Check FPS in JS? - which did work to some degree, I was able to find out how long each loop took to complete.

我想要的是什么更可读和可控。我想能够为FPS计数器设置刷新速率，使其缓慢，所以它是人类可读或应用程序可以运行的速度，所以我可以使用它在某种速度计。

What I am looking for though is something more readable and controllable. I want to be able to set the refresh rate for the FPS counter to make it slow so it is human readable or as fast as the application can run, so I can use it on some kind of speedometer.

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

Anyway so here is the code I have right now:

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毫秒？

1. Am I right to be setting the setTimeout function to a speed of 1 millisecond? I was thinking this will just make it loop as fast as it possibly can.

我应该每100帧左右计算一次，看看它花了多少毫秒运行100帧，然后进行计算，以找出如果毫秒是1000，它会做多少帧？这个计算是什么？

Should I count every 100 frames or so, find out how many milliseconds it took to run 100 frames then make a calculation to find out how many frames it would have done if the milliseconds were 1000? What would this calculation be?

为了使结果更准确我猜测我需要显示平均值作为一个框架可以有很大的变化，

To make the result more accurate I am guessing I need to display averages as one frame can vary a significant amount, how should I do this?

任何提示都非常感谢。

感谢。

推荐答案

1. 请注意，更新输出速度越快，将影响您的测量。虽然最小，我尝试每秒更新我的fps输出或更少，除非有必要更快。

1. Note that the faster you update your output, the more you will affect your measurement. Although minimal, I try to update my fps output once per second or less unless it's necessary to go faster.

我喜欢有一个低通滤波器我的结果，使临时打嗝不会太强烈地影响值。这比移动平均更容易计算和写入，并且没有总体平均值的问题，其中当前读数受整个运行期间的总体性能（例如启动期间的异常读数）的影响。

I like to have a low-pass filter on my results so that a temporary hiccup doesn't affect the values too strongly. This is easier to compute and write than a moving average, and doesn't have the problem of an overall average where your 'current' readings are affected by total performance over the entire run (e.g. anomalous readings during startup).

放在一起，下面是我通常测量FPS的方法：

Put together, here's how I usually measure 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); 

这篇关于HTML5 Canvas性能 - 计算每秒的循环/帧数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！