requestAnimationFrame: Объяснение возврата частоты кадров

Question

Так что я нашел этот полезный кусок кода и использовал его для мгновенной частоты кадров для созданной мною анимации. Я надеялся, что кто-нибудь может помочь мне понять, как это работает?

Вот мой код:

<script src="jquery.js"></script>

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

(function loop() {
  requestAnimationFrame(function () {
    $('#out').html(countFPS());
    loop();
  });
}());

#out приводит к выходному тегу, если это не было очевидно.

Answer 1

Вся магия происходит в requestAnimationFrame, который является "черным ящиком", который действительно делает все необходимое для работы функции. он говорит вам, что "теперь у меня есть свободные ресурсы для рендеринга новой картинки"

все это просто завершает и измеряет разницу во времени между этими моментами моментов "я могу сделать новый кадр сейчас". пример: сначала это было 24 октября 2015 года, 10: 55: 10.1492169, затем это было 24 октября 2015 года, 10: 55: 10.1492525. следовательно, частота рисования нового кадра составляет 356 миллисекунд. если бы процессор был перегружен больше, он был бы выше

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

Answer 2

Функция "countFPS" просто сравнивает миллисекунды метки времени, записанной в предыдущем вызове, с меткой в ​​текущем вызове. Если новый счетчик миллисекунд больше, чем предыдущий, он предполагает, что он находится в ту же секунду, и поэтому подсчитывается еще один "кадр" (count переменная увеличивается). Если нет, то счетчик сбрасывается в 1.

Почему он запускает счетчик с 2 или действительно, почему этот код вообще существует, не ясно. Я не вижу, как это особенно "полезный" код. requestAnimationFrame() Функция предназначена для соответствия низкоуровневой частоте обновления на дисплее, которая на любом современном ЖК-экране будет 60 Гц. Даже если он другой, ваш код ничего не может с этим поделать. Запуск этого кода во время выполнения анимации добавляет издержки на выполнение обновления DOM (изменяя содержимое элемента out), что напрямую влияет на объем работы, которую может выполнять ваша собственная анимация.