performance() в браузере

Когда речь заходит о производительности веб-приложений, большинство разработчиков вспоминают Lighthouse, Web Vitals и профайлеры в DevTools. Но в современном JavaScript есть ещё один мощный инструмент, который часто недооценивают — Performance API. Это встроенный интерфейс браузера, который позволяет точно измерять время выполнения операций внутри веб-приложения: от загрузки страницы до конкретных участков кода. Он даёт доступ к высокоточным временным меткам (DOMHighResTimeStamp) и системам метрик.

Я использовал его для отладки интервалов и таймеров. Надеюсь, ни для кого не секрет, что в js interval(1000) - это далеко не 1 секунда.

Например, задача

Имеется временное отклонение t при работе таймеров в системе. Ожидаем, что таймер выполнится через 1000 мс, и проверяем реальное время:

const interval = 1000;
let ticks = 0;
let last = performance.now();

const id = setInterval(() => {
  ticks++;
  const now = performance.now();
  const drift = now - last - interval; 

  console.log(
    `Тик #${ticks} — задержка: ${drift.toFixed(2)}ms, текущее время: ${(now - start).toFixed(2)}ms`
  );

  last = now;

  if (ticks >= 5) {
    clearInterval(id);
    console.log('Интервал остановлен');
  }
}, interval);

const start = performance.now();

В реальности получил от 920мс до 1100. Иногда больше - иногда меньше. В зависимости от загруженности EventLoop или процессора ПК, активности вкладки и так далее.