requestAnimationFrame: Объяснение возврата Framerate

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.1492 , затем было 24 октября 2015 года, 10: 55: 10.1492 . поэтому частота появления нового кадра составляет 356 миллисекунд. если бы процессор был перегружен больше, было бы выше, было бы выше, было бы выше

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

Answer 2

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

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