PerformanceNavigationTiming: свойство domContentLoadedEventStart

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

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

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

Свойство 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 });

Пример с использованием 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