PerformanceLongTaskTiming

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

Длительные задачи, которые блокируют основной поток на 50 мс или более, вызывают, среди прочего:

• Задержку времени до интерактивности (TTI).
• Высокую/переменную задержку ввода.
• Высокую/переменную задержку обработки событий.
• Неровные анимации и прокрутку.

Длительной задачей является любой непрерывный период, в течение которого основной поток пользовательского интерфейса занят в течение 50 мс или дольше. К распространённым примерам относятся:

• Длительно выполняемые обработчики событий.
• Дорогостоящие перерисовки и другие перерендеринги.
• Работа браузера между различными циклами событий, превышающая 50 мс.

Длительные задачи относятся к "виновнику, содержащему контекст просмотра", или "контейнеру" короче, который представляет собой главную страницу, <iframe>, <embed> или <object>, в рамках которого произошла задача.

Для задач, которые не происходят на главной странице, и для выяснения того, какой контейнер отвечает за длительную задачу, интерфейс TaskAttributionTiming предоставляет свойства containerId, containerName и containerSrc, которые могут предоставить более подробную информацию об источнике задачи.

PerformanceLongTaskTiming наследуется от PerformanceEntry.

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

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

Возвращает DOMHighResTimeStamp, представляющий прошедшее время между началом и концом задачи с точностью до 1 мс.

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

Всегда возвращает "longtask"

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

Возвращает одну из следующих строк, относящихся к контексту просмотра или фрейму, которые можно отнести к длительной задаче:

• "cross-origin-ancestor"
• "cross-origin-descendant"
• "cross-origin-unreachable"
• "multiple-contexts"
• "same-origin-ancestor"
• "same-origin-descendant"
• "same-origin"
• "self"
• "unknown"

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

Возвращает DOMHighResTimeStamp, представляющий время начала задачи.

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

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

Возвращает последовательность экземпляров TaskAttributionTiming.

PerformanceLongTaskTiming.toJSON() Экспериментально

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

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

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
  });
});

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

• TaskAttributionTiming