Как определить fps сайта при скроле?

Рейтинг: 0Ответов: 1Опубликовано: 07.02.2023

При прокрутке на мобильном телефоне, в основном на яндекс браузере, сайт притормаживает. Как определить какой fps и что именно его так тормозит?

Ссылка на сайт: ссылка

javascript
Источник: Stack Overflow на русском

Ответы

▲ -1

Маленький класс для работы именно с FPS.

class Engine {
  static #FPS; // Количество кадров в секунду (тот самый FPS)
  static get FPS() { // в геттер пишем, чтобы был только читабельным
    return this.#FPS;
  }
  static { // Логика расчетов
    let previousFrame = performance.now(); // Момент выполнения предыдущего кадра
    setInterval(() => {
      let currentFrame = performance.now(); // Момент выполнения текущего кадра
      this.#FPS = (1000 / (currentFrame - previousFrame)); // Считаем количество
      previousFrame = currentFrame; // После расчетов текущий кадр становится предыдущей
    }, 0);
  }
}

setInterval(() => {
  document.body.innerText = Engine.FPS.toFixed(0);
}, 1000); // Расчеты выполняются часто, но показатель обновляется в каждую секунду

Для вывода во время прокрутки используйте:

document.addEventListener(`scroll`, (event) => {
  console.clear();
  console.log(Engine.FPS);
});