PerformanceNavigationTiming: свойство domContentLoadedEventEnd

Чтение-только свойство domContentLoadedEventEnd возвращает DOMHighResTimeStamp, представляющий время сразу после завершения обработчика события DOMContentLoaded текущего документа.

Как правило, фреймворки и библиотеки ожидают события DOMContentLoaded перед запуском своего кода. Мы можем использовать свойства domContentLoadedEventEnd и domContentLoadedEventStart для расчета времени выполнения этого кода.

DOMHighResTimeStamp представляющий время сразу после завершения обработчика события DOMContentLoaded текущего документа.

Свойство domContentLoadedEventEnd можно использовать для измерения времени, необходимого для обработки обработчика события 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 });

Пример с использованием Performance.getEntriesByType(), который показывает только записи производительности navigation , присутствующие в временной шкале производительности браузера в момент вызова этого метода:

const entries = performance.getEntriesByType("navigation");
entries.forEach((entry) => {
  const domContentLoadedTime =
    entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart;
  console.log(
    `${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`,
  );
});

• DOMContentLoaded