PerformanceEventTiming

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

Этот API обеспечивает просмотр медленных событий, предоставляя отметки времени и длительность для определенных типов событий (см. ниже). Например, вы можете отслеживать время между действием пользователя и началом его обработчика событий или время выполнения обработчика событий.

Этот API особенно полезен для измерения Interaction to Next Paint (INP): максимального времени (за вычетом некоторых выбросов) с момента взаимодействия пользователя с вашим приложением до момента, когда браузер фактически смог ответить на это взаимодействие.

Обычно вы работаете с объектами PerformanceEventTiming путем создания экземпляра PerformanceObserver и вызова его метода observe(), передав в него "event" или "first-input" в качестве значения опции type. Затем обратный вызов объекта PerformanceObserver будет вызван со списком объектов PerformanceEventTiming, которые вы можете проанализировать. Подробнее см. пример ниже.

По умолчанию записи PerformanceEventTiming отображаются, когда их duration составляет 104 мс или больше. Исследования показывают, что ввод пользователя, который не обрабатывается в течение 100 мс, считается медленным, а 104 мс — это первое кратное 8, большее 100 мс (по соображениям безопасности этот API округляется до ближайшего кратного 8 мс). Однако вы можете установить PerformanceObserver на другой порог с помощью опции durationThreshold в методе observe().

Этот интерфейс наследует методы и свойства от своего родителя, PerformanceEntry:

API тайминга событий отображает следующие типы событий:

Обратите внимание, что следующие события не включены в список, потому что они являются непрерывными событиями, и на данном этапе нельзя получить значимые счетчики событий или метрики производительности: mousemove, pointermove, pointerrawupdate, touchmove, wheel, drag.

Чтобы получить список всех отображаемых событий, вы также можете найти ключи в карте performance.eventCounts:

const exposedEventsList = [...performance.eventCounts.keys()];

У этого интерфейса нет собственного конструктора. См. пример ниже, чтобы узнать, как получить информацию, хранящуюся в интерфейсе PerformanceEventTiming.

Этот интерфейс расширяет следующие свойства PerformanceEntry для типов записей производительности тайминга событий следующим образом:

PerformanceEntry.duration Только для чтения

Возвращает DOMHighResTimeStamp, представляющий время от startTime до следующей отрисовки (округлено до ближайших 8 мс).

PerformanceEntry.entryType Только для чтения

Возвращает "event" (для длительных событий) или "first-input" (для первого взаимодействия пользователя).

PerformanceEntry.name Только для чтения

Возвращает тип связанного события.

PerformanceEntry.startTime Только для чтения

Возвращает DOMHighResTimeStamp, представляющий свойство timestamp связанного события. Это время создания события и может рассматриваться как прокси для времени взаимодействия пользователя.

Этот интерфейс также поддерживает следующие свойства:

PerformanceEventTiming.cancelable Только для чтения

Возвращает свойство cancelable связанного события.

PerformanceEventTiming.interactionId Только для чтения Экспериментально

Возвращает идентификатор, который однозначно определяет взаимодействие пользователя, вызвавшее связанное событие.

PerformanceEventTiming.processingStart Только для чтения

Возвращает DOMHighResTimeStamp, представляющий время начала отправки события. Чтобы измерить время между действием пользователя и началом работы обработчика событий, вычислите processingStart-startTime.

PerformanceEventTiming.processingEnd Только для чтения

Возвращает DOMHighResTimeStamp, представляющий время окончания отправки события. Чтобы измерить время выполнения обработчика событий, вычислите processingEnd-processingStart.

PerformanceEventTiming.target Только для чтения

Возвращает последний целевой объект связанного события, если он не удалён.

PerformanceEventTiming.toJSON()

Возвращает JSON-представление объекта PerformanceEventTiming.

Чтобы получить информацию о времени событий, создайте экземпляр PerformanceObserver, а затем вызовите его метод observe(), передав "event" или "first-input" в качестве значения параметра type. Вам также необходимо установить buffered на true для доступа к событиям, которые пользовательский агент буферизовал во время построения документа. Затем обратный вызов объекта PerformanceObserver будет вызван со списком объектов PerformanceEventTiming, которые вы можете проанализировать.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    // Full duration
    const duration = entry.duration;

    // Input delay (before processing event)
    const delay = entry.processingStart - entry.startTime;

    // Synchronous event processing time
    // (between start and end dispatch)
    const eventHandlerTime = entry.processingEnd - entry.processingStart;
    console.log(`Total duration: ${duration}`);
    console.log(`Event delay: ${delay}`);
    console.log(`Event handler duration: ${eventHandlerTime}`);
  });
});

// Register the observer for events
observer.observe({ type: "event", buffered: true });

Вы также можете установить другое значение durationThreshold. Значение по умолчанию составляет 104 мс, а минимально возможное значение порога продолжительности — 16 мс.

observer.observe({ type: "event", durationThreshold: 16, buffered: true });

• API наблюдателя пересечений
• API видимости страницы