PerformanceNavigationTiming: свойство domInteractive

Чтение только свойство domInteractive возвращает DOMHighResTimeStamp, представляющий момент времени непосредственно перед тем, как пользовательский агент установит для документа readyState в значение "interactive".

Измерение времени обработки DOM может быть некритичным, если у вашего сайта очень большой HTML-код для построения Document Object Model.

Если нет блокирующего парсер JavaScript, то событие DOMContentLoaded (см. domContentLoadedEventStart для отметки времени) сработает сразу после domInteractive.

A DOMHighResTimeStamp представляющий момент времени непосредственно перед тем, как пользовательский агент установит для документа readyState в значение "interactive".

Свойство domInteractive может использоваться для ведения журнала времени, когда завершено построение DOM и взаимодействие с ним возможно.

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

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(
      `${entry.name}: domInteractive time: ${entry.domInteractive}ms`,
    );
  });
});

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

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

const entries = performance.getEntriesByType("navigation");
entries.forEach((entry) => {
  console.log(`${entry.name}: domInteractive time: ${entry.domInteractive}ms`);
});

• Document.readyState