Question

我如何计算画布游戏应用程序的FPS？我已经看过一些例子，但没有一个使用requestAnimationFrame，我不知道如何在那里应用他们的解决方案。这是我的代码：

(function(window, document, undefined){

    var canvas       = document.getElementById("mycanvas"),
        context      = canvas.getContext("2d"),
        width        = canvas.width,
        height       = canvas.height,
        fps          = 0,
        game_running = true,
        show_fps     = true;

    function showFPS(){
        context.fillStyle = "Black";
        context.font      = "normal 16pt Arial";

        context.fillText(fps + " fps", 10, 26);
    }
    function gameLoop(){

        //Clear screen
        context.clearRect(0, 0, width, height);

        if (show_fps) showFPS();

        if (game_running) requestAnimationFrame(gameLoop);

    }
    
    gameLoop();

}(this, this.document))

canvas{
    border: 3px solid #fd3300;
}

<canvas id="mycanvas" width="300" height="150"></canvas>

顺便问一下，我可以添加任何库来监督性能吗？

Answer 1

您可以跟踪上次调用requestAnimFrame的时间。

var lastCalledTime;
var fps;

function requestAnimFrame() {

  if(!lastCalledTime) {
     lastCalledTime = Date.now();
     fps = 0;
     return;
  }
  delta = (Date.now() - lastCalledTime)/1000;
  lastCalledTime = Date.now();
  fps = 1/delta;
}

http://jsfiddle.net/vZP3u/

Answer 2

不要使用`new Date()`

此API有几个缺陷，仅对获取当前日期+时间有用。不适用于测量时间跨度。

Date-API使用操作系统的内部时钟，该内部时钟不断更新并与NTP时间服务器同步。这意味着，此时钟的速度/频率有时更快，有时比实际时间更慢 - 因此无法用于测量持续时间和帧速率。

如果有人更改系统时间（手动或由于夏令时），您至少可以看到一个框架突然需要一个小时的问题。或者是负面时间。但如果系统时钟与世界时间同步快20％，则几乎不可能检测到。

此外，Date-API非常不精确 - 通常远不到1毫秒。这使得它对于帧速率测量尤其无用，其中一个60Hz帧需要~17ms。

而是使用`performance.now()`

Performance API专门针对此类用例制作，可以与new Date()等效使用。只需采取其中一个答案并将new Date()替换为performance.now()，即可开始使用。

<强>来源：

与Date.now（）不同，Performance.now（）返回的值始终以恒定速率增加，与系统时钟无关（可能会手动调整或通过NTP等软件进行调整）。否则，performance.timing.navigationStart + performance.now（）会大约等于Date.now（）。

https://developer.mozilla.org/en-US/docs/Web/API/Performance/now

对于Windows：

[时间服务]调整本地时钟速率以允许它收敛到正确的时间。如果本地时钟和[准确时间样本]之间的时间差太大而无法通过调整本地来纠正时钟频率，时间服务将本地时钟设置为正确的时间。

https://technet.microsoft.com/en-us/library/cc773013(v=ws.10).aspx

Answer 3

Chrome 有一个内置的fps计数器：https://developer.chrome.com/devtools/docs/rendering-settings

只需打开开发控制台（ F12 ），打开抽屉（ Esc ），然后添加＆＃34;渲染＆＃34;标签

在这里，您可以激活FPS-Meter叠加层以查看当前帧速率（包括漂亮的图形）以及GPU内存消耗。

跨浏览器解决方案 您可以使用JavaScript库stat.js获得类似的叠加层：https://github.com/mrdoob/stats.js/

它还为帧速率（包括图形）提供了很好的叠加，并且非常易于使用。

比较stats.js和chrome dev工具的结果时，两者都显示完全相同的测量值。所以你可以相信那个库实际上做了正确的事情。

Answer 4

我有一个不同的方法，因为如果你计算FPS，你会在返回数字时得到这个闪烁。我决定计算每一帧并每秒返回一次

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

requestAnimationFrame(function () {
  console.log(countFPS());
});

jsfiddle

Answer 5

只需检查AFR回调之间的时差。 AFR已将时间作为回调的参数传递。我更新了你的小提琴以显示它：http://jsfiddle.net/WCKhH/1/

Answer 6

只是一个概念证明。非常简单的代码。我们所做的只是设置每秒帧数和每帧之间的间隔。在绘图功能中，我们从当前时间中扣除最后一帧的执行时间，以检查自上一帧起经过的时间是否大于我们的间隔（基于fps）。如果条件的计算结果为true，我们将设置当前帧的时间，该时间将是下一个绘图调用中的“最后一帧执行时间”。

var GameLoop = function(fn, fps){
    var now;
    var delta;
    var interval;
    var then = new Date().getTime();

    var frames;
    var oldtime = 0;

    return (function loop(time){
        requestAnimationFrame(loop);

        interval = 1000 / (this.fps || fps || 60);
        now = new Date().getTime();
        delta = now - then;

        if (delta > interval) {
            // update time stuffs
            then = now - (delta % interval);

            // calculate the frames per second
            frames = 1000 / (time - oldtime)
            oldtime = time;

            // call the fn
            // and pass current fps to it
            fn(frames);
        }
    }(0));
};

用法：

var set;
document.onclick = function(){
    set = true;
};

GameLoop(function(fps){
    if(set) this.fps = 30;
    console.log(fps);
}, 5);

http://jsfiddle.net/ARTsinn/rPAeN/

Answer 7

这是另一个解决方案：

var times = [];
var fps;

function refreshLoop() {
  window.requestAnimationFrame(function() {
    const now = performance.now();
    while (times.length > 0 && times[0] <= now - 1000) {
      times.shift();
    }
    times.push(now);
    fps = times.length;
    refreshLoop();
  });
}

refreshLoop();

通过以下方式改善了其他一些方面：

performance.now()用于Date.now()以提高精确度（as covered in this answer）
FPS是在最后一秒内测量的，所以数字不会跳得太厉害，特别是对于有长单帧的应用程序。

我更详细地写了这个解决方案on my website。

Answer 8

实际上，没有一个答案足以满足我的需求。这是一个更好的解决方案，

使用的performance.now（）
计算每秒实际平均 fps
每秒的平均和小数位是可以配置的

代码：

// Options
const outputEl         = document.getElementById('fps-output');
const decimalPlaces    = 2;
const updateEachSecond = 1;

// Cache values
const decimalPlacesRatio = Math.pow(10, decimalPlaces);
let timeMeasurements     = [];

// Final output
let fps = 0;

const tick = function() {
  timeMeasurements.push(performance.now());

  const msPassed = timeMeasurements[timeMeasurements.length - 1] - timeMeasurements[0];

  if (msPassed >= updateEachSecond * 1000) {
    fps = Math.round(timeMeasurements.length / msPassed * 1000 * decimalPlacesRatio) / decimalPlacesRatio;
    timeMeasurements = [];
  }

  outputEl.innerText = fps;

  requestAnimationFrame(() => {
    tick();
  });
}

tick();

JSFiddle

Answer 9

我与 performance.now() 一起使用的最佳方式
很简单，我在 gameLoop 函数上传递了 TIME 并且计算fps

fps = 1 / ( (performance.now() - LAST_FRAME_TIME) / 1000 );

(function(window, document, undefined){

    var canvas       = document.getElementById("mycanvas"),
        context      = canvas.getContext("2d"),
        width        = canvas.width,
        height       = canvas.height,
        fps          = 0,
        game_running = true,
        show_fps     = true,
        LAST_FRAME_TIME = 0;

    function showFPS(){
        context.fillStyle = "Black";
        context.font      = "normal 16pt Arial";

        context.fillText(fps + " fps", 10, 26);
    }
    function gameLoop(TIME){

        //Clear screen
        context.clearRect(0, 0, width, height);

        if (show_fps) showFPS();

        fps = 1 / ((performance.now() - LAST_FRAME_TIME) / 1000);

        LAST_FRAME_TIME = TIME /* remember the time of the rendered frame */

        if (game_running) requestAnimationFrame(gameLoop);

    }
    
    gameLoop();

}(this, this.document))

canvas{
    border: 3px solid #fd3300;
}

<canvas id="mycanvas" width="300" height="150"></canvas>

Answer 10

我缺少一个实现，可以针对平均FPS值自定义样本大小。这是我的，它具有以下功能：

准确：基于performance.now（）
稳定：返回的FPS值为平均值（fps.value | fps.tick（））
可配置：FPS样本数组大小可以自定义（fps.samplesSize）
高效：用于收集样本的旋转数组（避免调整数组大小）

const fps = {
    sampleSize : 60,    
    value : 0,
    _sample_ : [],
    _index_ : 0,
    _lastTick_: false,
    tick : function(){
        // if is first tick, just set tick timestamp and return
        if( !this._lastTick_ ){
            this._lastTick_ = performance.now();
            return 0;
        }
        // calculate necessary values to obtain current tick FPS
        let now = performance.now();
        let delta = (now - this._lastTick_)/1000;
        let fps = 1/delta;
        // add to fps samples, current tick fps value 
        this._sample_[ this._index_ ] = Math.round(fps);
        
        // iterate samples to obtain the average
        let average = 0;
        for(i=0; i<this._sample_.length; i++) average += this._sample_[ i ];

        average = Math.round( average / this._sample_.length);

        // set new FPS
        this.value = average;
        // store current timestamp
        this._lastTick_ = now;
        // increase sample index counter, and reset it
        // to 0 if exceded maximum sampleSize limit
        this._index_++;
        if( this._index_ === this.sampleSize) this._index_ = 0;
        return this.value;
    }
}


// *******************
// test time...
// *******************

function loop(){
    let fpsValue = fps.tick();
    window.fps.innerHTML = fpsValue;
    requestAnimationFrame( loop );
}
// set FPS calulation based in the last 120 loop cicles 
fps.sampleSize = 120;
// start loop
loop()

<div id="fps">--</div>

Answer 11

我的fps计算使用 requestAnimationFrame() 及其匹配的 timestamp 参数作为其回调函数。
参见https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame和https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp。

不需要new Date()或performance.now()！

其余的灵感主要来自此线程中的其他答案，尤其是https://stackoverflow.com/a/48036361/4706651。

var fps = 1;
var times = [];
var fpsLoop = function (timestamp) {
    while (times.length > 0 && times[0] <= timestamp - 1000) {
        times.shift();
    }
    times.push(timestamp);
    fps = times.length;
    console.log(fps);
    requestAnimationFrame(fpsLoop);
}

requestAnimationFrame(fpsLoop);

使用requestAnimationFrame在Canvas中计算FPS

11 个答案:

不要使用`new Date()`

而是使用`performance.now()`

使用requestAnimationFrame在Canvas中计算FPS

11 个答案:

不要使用new Date()

而是使用performance.now()

不要使用`new Date()`

而是使用`performance.now()`