Как измерять производительность JavaScript

Проблемы с производительностью JavaScript легко почувствовать, но сложно локализовать. Ваше приложение работает медленно, взаимодействия запаздывают, пользователи это замечают — но без правильных инструментов измерения вы действуете наугад. Эта статья охватывает практические техники измерения производительности JavaScript с использованием современных браузерных API и DevTools, чтобы вы могли находить реальные узкие места и исправлять то, что действительно важно.

Лабораторное тестирование vs. данные реальных пользователей

Прежде чем браться за инструмент, поймите два типа измерения производительности JavaScript:

• Синтетическое (лабораторное) тестирование запускает ваш код в контролируемой среде. Инструменты вроде Lighthouse и Chrome DevTools дают вам повторяемые, отлаживаемые результаты. Отлично подходят для разработки и CI-пайплайнов.
• Полевые данные (RUM) фиксируют то, что испытывают реальные пользователи. Инструменты вроде Chrome User Experience Report (CrUX) или RUM-платформы показывают вам фактическую производительность на разных устройствах и в разных сетях.

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

Профилирование JavaScript в Chrome DevTools

Chrome DevTools — это наиболее практичная отправная точка для метрик производительности JavaScript. Откройте панель Performance, нажмите запись, взаимодействуйте со страницей, затем остановите запись.

На что обращать внимание:

• Long Tasks — любая задача, блокирующая главный поток более чем на 50 мс, отображается красным цветом. Они часто задерживают взаимодействия пользователя. Современные инструменты также могут показывать Long Animation Frames, которые предоставляют более детальную информацию о медленных кадрах, влияющих на отзывчивость.
• Call Tree / Bottom-Up views — определяют, какие функции потребляют больше всего времени выполнения.
• Flame chart — визуализирует стек вызовов во времени, чтобы выявить затратную синхронную работу.

Firefox DevTools предлагает похожий профайлер. Оба инструмента бесплатны, не требуют настройки и работают на любом сайте.

Измерение времени выполнения JavaScript с помощью Performance API

Для точного программного измерения производительности JavaScript используйте встроенный в браузер Performance API.

Использование performance.now()

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

const start = performance.now()
runExpensiveOperation()
const duration = performance.now() - start
console.log(`Took ${duration}ms`)

Использование performance.mark() и performance.measure()

Для структурированного измерения времени в нескольких точках используйте метки и измерения. Это напрямую интегрируется с DevTools и PerformanceObserver.

performance.mark('fetch-start')
const data = await fetchData()
performance.mark('fetch-end')

const measure = performance.measure('fetch-duration', 'fetch-start', 'fetch-end')
console.log(measure.duration) // миллисекунды

Измерения появляются на панели Performance в Chrome DevTools в треке Timings, что упрощает их корреляцию с другой активностью на главном потоке.

Автоматизация измерений с помощью PerformanceObserver

PerformanceObserver позволяет реагировать на записи производительности по мере их появления — полезно для продакшн-мониторинга.

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, entry.duration)
  }
})

observer.observe({ type: 'measure', buffered: true })

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

Core Web Vitals и INP: метрики, которые имеют значение

Core Web Vitals от Google — это стандартные метрики производительности JavaScript для пользовательского опыта. Наиболее релевантная для JavaScript — это Interaction to Next Paint (INP) — она измеряет задержку всех взаимодействий (клики, касания, ввод с клавиатуры) на протяжении всего времени жизни страницы.

INP выше 200 мс — это предупреждающий знак. Выше 500 мс — плохо. Интенсивное выполнение JavaScript во время обработчиков событий — наиболее частая причина.

Используйте библиотеку web-vitals для измерения INP в полевых условиях:

import { onINP } from 'web-vitals'
onINP(({ value }) => console.log('INP:', value))

Для SPA учтите, что мягкие навигации (смена маршрутов без полной перезагрузки страницы) лишь частично фиксируются стандартными метриками навигации. Браузерная поддержка измерения мягких навигаций всё ещё развивается, поэтому ручная инструментация переходов между маршрутами с помощью performance.mark() может помочь заполнить пробелы.

Выбор правильного инструмента

Заключение

Эффективное измерение производительности JavaScript начинается с правильного инструмента для правильного вопроса. Используйте DevTools для профилирования и исследования, Performance API для инструментирования конкретных путей кода, и Core Web Vitals — особенно INP — чтобы понять, что на самом деле испытывают пользователи. Сначала измеряйте, затем оптимизируйте.

Часто задаваемые вопросы

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.