Временные метки навигации

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

Включается только текущий документ, поэтому обычно для наблюдения существует только один объект PerformanceNavigationTiming. Он расширяет интерфейс PerformanceEntry с типом entryType "navigation" и также наследуется от PerformanceResourceTiming, поэтому доступны все отметки времени из процесса получения документа.

Рисунок 1. Временные метки навигации (источник).

Временные метки навигации документа (в дополнение к меткам из Временных меток ресурсов) следующие:

1. startTime: Всегда 0.
2. unloadEventStart: (если есть предыдущий документ) отметка времени непосредственно перед запуском обработчика события unload текущего документа.
3. unloadEventEnd: (если есть предыдущий документ) отметка времени непосредственно после завершения обработчика события unload текущего документа.
4. domInteractive: отметка времени, когда построение DOM завершено и взаимодействие с ним из JavaScript возможно.
5. domContentLoadedEventStart: отметка времени непосредственно перед запуском обработчика события DOMContentLoaded текущего документа.
6. domContentLoadedEventEnd: отметка времени непосредственно после завершения обработчика события DOMContentLoaded текущего документа.
7. domComplete: отметка времени, когда загрузка документа и всех зависимых ресурсов завершена.
8. loadEventStart: отметка времени непосредственно перед запуском обработчика события load текущего документа.
9. loadEventEnd: отметка времени непосредственно после завершения обработчика события load текущего документа.

Интерфейс PerformanceNavigationTiming предоставляет дополнительные свойства, такие как redirectCount, возвращающее количество перенаправлений, и type, указывающее тип навигации.

Метки времени domContentLoadedEventEnd и domContentLoadedEventStart могут быть использованы для измерения времени обработки обработчика события DOMContentLoaded.

Этот пример использует PerformanceObserver, который уведомляет вызывающую сторону о новых записях производительности navigation по мере их записи в временной шкале производительности браузера. Пример использует опцию buffered для доступа к записям, которые были записаны до создания наблюдателя.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const domContentLoadedTime =
      entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart;
    console.log(
      `${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`,
    );
  });
});

observer.observe({ type: "navigation", buffered: true });

Дополнительные примеры см. на страницах свойств в справочной документации PerformanceNavigationTiming.

• PerformanceNavigationTiming
• PerformanceResourceTiming