Производительность холста HTML5 — расчет циклов/кадров в секунду

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

Я пробовал кое-что,

Если вы измените

lastUpdate = now

to

lastUpdate = now * 1 - 1;

Ваша проблема с NaN решена! Это также используется там, где определено lastUpdate. Вероятно, потому что он не может преобразовать дату в отметку времени unix.

Новый результат будет:

var fps = 0, now, lastUpdate = (new Date)*1 - 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);
  fps += (thisFrameFPS - fps) / fpsFilter;
  lastUpdate = now * 1 - 1;

  setTimeout( drawFrame, 1 );
}

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

Я взял опубликованные решения и немного улучшил их. Посмотрите здесь - http://jsfiddle.net/ync3S/

1. Я исправил эту ошибку NaN, используя Date.now() вместо того, чтобы каждый раз создавать новый объект даты и пытаться ссылаться на него. Это также предотвращает необходимость сбора мусора.
2. Я немного подправил имена переменных и функций и добавил дополнительные комментарии — не обязательно, но приятно.
3. Я включил код рисования для тестирования.
4. Я добавил fpsDesired в качестве тестовой переменной для цикла движка.
5. Я запустил fpsAverage с fpsDesired, поэтому с fpsFilter он не работает с 0 до реального FPS, а начинает с желаемого FPS и настраивается оттуда.
6. Рисование сейчас блокируется, если оно уже рисовалось, и это можно использовать для приостановки и других функций управления.

Основной блок выглядит следующим образом:

var fpsFilter = 1; // the low pass filter to apply to the FPS average
var fpsDesired = 25; // your desired FPS, also works as a max
var fpsAverage = fpsDesired;
var timeCurrent, timeLast = Date.now();
var drawing = false;

function fpsUpdate() {
    fpsOutput.innerHTML = fpsAverage.toFixed(2);
}

function frameDraw() {
    if(drawing) { return; } else { drawing = true; }

    timeCurrent = Date.now();
    var fpsThisFrame = 1000 / (timeCurrent - timeLast);
    if(timeCurrent > timeLast) {
        fpsAverage += (fpsThisFrame - fpsAverage) / fpsFilter;
        timeLast = timeCurrent;
    }

    drawing = false;
}

setInterval(fpsUpdate, 1000);
fpsUpdate();

setInterval(frameDraw, 1000 / fpsDesired);
frameDraw();

Собираюсь повозиться и посмотреть, смогу ли я придумать что-то более гладкое, так как эта тема находится в верхней части результатов Google.

Давайте посмотрим, что мы все можем придумать как команда, и я думаю, что всегда полезно не использовать сторонние библиотеки, делая код переносимым для всех :)

-Платима

Просто установите интервал, который сбрасывает счетчик кадров каждую секунду.

var fpsOut, fpsCount;

var draw = function () {

    fpsCount++;

    ..Draw To Canvas..


    ..Get the fps value: fpsOut

    requestAnimationFrame(draw);

};
setInterval(function () {

    fpsOut = fpsCount;
    fpsCount = 0;

}, 1000);

draw();

Если вам нужны обновления в режиме реального времени, подумайте о том, чтобы повторять их снова и снова в режиме реального времени. Чтобы это меньше влияло на производительность, обновите только контролируемую переменную, в данном случае FPS. У вас может быть необязательная задержка кадра, которую я поставлю здесь на всякий случай. Просто скопируйте, вставьте и настройте код под свои нужды.

Обратите внимание, что один кадр длится 16,66 миллисекунды.

setInterval(function(){var latencybase1 = parseFloat(new Date().getTime());
var latencybase2 = parseFloat(new Date().getTime());
var latency = latencybase2-latencybase1;
var fps = Math.round(1000/latency);

if (latency<16.66) 
{document.getElementById("FPS").innerHTML = fps+" 
FPS";}
else {document.getElementById("FPS").innerHTML = ""+fps+" FPS";}
document.getElementById("Latency").innerHTML = latency+" ms";}, 0);