Замер delta time и FPS в браузере

Web Frontend: JavaScript, HTML/CSS
#1

Сначала попытался сделать вот так:

let lastDate = new Date();

function lifeCycle() {
    const currentTime = new Date();
    const diff = currentTime.getMilliseconds() - lastDate.getMilliseconds();
    deltaTime = diff / 100;
    lastDate = currentTime;

    handleControls();

    renderScene();

    window.requestAnimationFrame(lifeCycle);
}
window.requestAnimationFrame(lifeCycle);

Но происходит какая-то странная фигня. Камера прыгает туда-сюда :thinking: Потом я заметил, что deltaTime иногда становится отрицательным :thinking: По-этому, добавил:

    if (diff > 0) { //магия вне Хогвардса
        deltaTime = diff / 100;
    }

Всё заработало. Потом вывел в консоль значение diff и оказалось, что оно циклически плавает от ~-500 до ~+500 :dizzy_face: Это почему вообще?
Начал гуглить и нашёл нормальный способ:

let then = 0;
function render(now) {
  now *= 0.001;                          // convert to seconds
  const deltaTime = now - then;          // compute time since last frame
  then = now;                            // remember time for next frame
  const fps = 1 / deltaTime;             // compute frames per second
  console.log(fps);  // update fps display
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

Проверил - работает. Только непонятно, откуда берётся переменная now и почему она увеличивается с каждой итерацией? :thinking:

#2

Сейчас ещё погугил. Оказалось, что первый способ тоже работает. Только вместо getMilliseconds() надо юзать getTime() и делить на 1000. Очень странно :thinking: Это ведь то же самое.
И ещё, похоже, что у браузера стоит frame limit на 60 fps :man_shrugging:

#3

Браузер передает )
Потому что в этой функции обычно надо вычислять сколько времени прошло с предыдущего вызова для правильной реализации анимации. Window.requestAnimationFrame() - Web APIs | MDN

getMilliseconds это от 0 до 999, а не сколько всего прошло.