Измерение производительности кода JavaScript имеет важное значение для оптимизации веб-приложений.В этой статье представлен четкий, пошаговый подход к расчету показателей производительности с использованием JavaScript.

Понимание показателей эффективности

Метрики производительности помогают разработчикам выявлять узкие места и повышать эффективность своего кода.Обычные показатели включают время выполнения, использование памяти и частоту кадров.

Использование Performance API

API производительности предоставляет инструменты для измерения различных аспектов выполнения кода. performance.now() метод возвращает временную метку с высоким разрешением, идеально подходящую для точного времени.

Для измерения времени выполнения, записывайте временные метки до и после блокировки кода:

Пример:

Старт-тайм = производительность.сейчас();

// Код для измерения

CondateTime = Performance.now ();

Продолжительность = конечное время - время начала;

Расчет других метрик

Использование памяти можно проверить с помощью объекта performance.memory, который предоставляет такие детали, как общий размер кучи JS и используемый размер кучи. Обратите внимание, что этот API поддерживается в основном в Chrome.

Для измерения частоты кадров используйте функцию requestAnimationFrame для отслеживания производительности рендеринга с течением времени.

Лучшие практики

Всегда выполняйте измерения несколько раз, чтобы учесть изменчивость. Используйте средние значения, чтобы получить более точные результаты. Избегайте измерения в периоды высокой активности, которые могут искажать данные.

  • Используйте таймеры высокого разрешения, такие как performance.now .
  • Проведите измерения несколько раз для точности.
  • Сравнение результатов в согласованных условиях.
  • Мониторинг использования памяти с помощью performance.memory.
  • Скриншоты из игры FLT:0:RequestAnimationFrame.