PerformanceResourceTiming

Интерфейс PerformanceResourceTiming позволяет извлекать и анализировать подробные данные о времени загрузки ресурсов приложения. Приложение может использовать эти метрики времени, чтобы определить, например, сколько времени занимает загрузка определенного ресурса, такого как XMLHttpRequest, <SVG>, изображение или скрипт.

Свойства интерфейса создают временную шкалу загрузки ресурса с отметками времени высокой точности для сетевых событий, таких как время начала и окончания перенаправления, начало и окончание получения, начало и окончание поиска DNS, время начала и окончания ответа и многое другое. Кроме того, интерфейс расширяет PerformanceEntry другими свойствами, которые предоставляют данные о размере полученного ресурса, а также типе ресурса, инициировавшего запрос.

Свойства этого интерфейса позволяют рассчитывать определенные метрики времени загрузки ресурсов. Распространенные случаи использования включают:

• Измерение времени рукопожатия TCP (connectEnd - connectStart)
• Измерение времени поиска DNS (domainLookupEnd - domainLookupStart)
• Измерение времени перенаправления (redirectEnd - redirectStart)
• Измерение времени промежуточного запроса (firstInterimResponseStart - finalResponseHeadersStart)
• Измерение времени запроса (responseStart - requestStart)
• Измерение времени согласования TLS (requestStart - secureConnectionStart)
• Измерение времени получения (без перенаправлений) (responseEnd - fetchStart)
• Измерение времени обработки ServiceWorker (fetchStart - workerStart)
• Проверка, был ли контент сжат (decodedBodySize не должно быть encodedBodySize)
• Проверка, были ли задействованы кэши (transferSize должны быть 0)
• Проверка, используются ли современные и быстрые протоколы (nextHopProtocol должен быть HTTP/2 или HTTP/3)
• Проверка, являются ли правильные ресурсы блокирующими для рендеринга (renderBlockingStatus)

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

PerformanceEntry.duration Только для чтения

Возвращает timestamp, который является разницей между свойствами responseEnd и startTime.

PerformanceEntry.entryType Только для чтения

Возвращает "resource".

PerformanceEntry.name Только для чтения

Возвращает URL ресурса.

PerformanceEntry.startTime Только для чтения

Возвращает timestamp для момента начала загрузки ресурса. Это значение эквивалентно PerformanceResourceTiming.fetchStart.

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

PerformanceResourceTiming.redirectStart Только для чтения

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

PerformanceResourceTiming.redirectEnd Только для чтения

DOMHighResTimeStamp сразу после получения последнего байта ответа последнего перенаправления.

PerformanceResourceTiming.workerStart Только для чтения

Возвращает DOMHighResTimeStamp непосредственно перед отправкой FetchEvent, если поток Service Worker уже запущен, или непосредственно перед запуском потока Service Worker, если он еще не запущен. Если ресурс не перехватывается потоком Service Worker, свойство всегда возвращает 0.

PerformanceResourceTiming.fetchStart Только для чтения

DOMHighResTimeStamp непосредственно перед тем, как браузер начинает загрузку ресурса.

PerformanceResourceTiming.domainLookupStart Только для чтения

DOMHighResTimeStamp непосредственно перед тем, как браузер начинает поиск доменного имени ресурса.

PerformanceResourceTiming.domainLookupEnd Только для чтения

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

PerformanceResourceTiming.connectStart Только для чтения

DOMHighResTimeStamp непосредственно перед тем, как браузер начинает устанавливать соединение с сервером для получения ресурса.

PerformanceResourceTiming.secureConnectionStart Только для чтения

DOMHighResTimeStamp непосредственно перед тем, как браузер начинает процесс рукопожатия для обеспечения безопасности текущего соединения.

PerformanceResourceTiming.connectEnd Только для чтения

DOMHighResTimeStamp сразу после того, как браузер завершил установку соединения с сервером для получения ресурса.

PerformanceResourceTiming.requestStart Только для чтения

DOMHighResTimeStamp непосредственно перед тем, как браузер начнет запрос ресурса у сервера.

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

DOMHighResTimeStamp, представляющая время промежуточного ответа (например, 100 Continue или 103 Early Hints).

PerformanceResourceTiming.responseStart Только для чтения

DOMHighResTimeStamp сразу после того, как браузер получил первый байт ответа от сервера (который может быть промежуточным ответом).

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

DOMHighResTimeStamp, представляющая время ответа окончательных заголовков (например, 200 Success) после любого промежуточного времени ответа.

PerformanceResourceTiming.responseEnd Только для чтения

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

Кроме того, этот интерфейс предоставляет следующие свойства, содержащие дополнительную информацию о ресурсе:

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

Строка, представляющая собой минимизированную и стандартизированную версию MIME-типа полученного ресурса.

PerformanceResourceTiming.decodedBodySize Только для чтения

Число, представляющее размер (в октетах) полученного из запроса (HTTP или кеша) тела сообщения после удаления применённого кодирования.

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

Указывает, как был доставлен ресурс — например, из кеша или из навигационного предварительного получения.

PerformanceResourceTiming.encodedBodySize Только для чтения

Число, представляющее размер (в октетах) полученного из запроса (HTTP или кеша) тела полезной нагрузки до удаления применённого кодирования.

PerformanceResourceTiming.initiatorType Только для чтения

Строка, представляющая веб-платформенную функцию, которая инициировала запись производительности.

PerformanceResourceTiming.nextHopProtocol Только для чтения

Строка, представляющая сетевой протокол, используемый для получения ресурса, как определено в ALPN Protocol ID (RFC7301).

PerformanceResourceTiming.renderBlockingStatus Только для чтения

Строка, представляющая состояние блокировки рендеринга. Либо "blocking" или "non-blocking".

PerformanceResourceTiming.responseStatus Только для чтения

Число, представляющее код состояния HTTP-ответа, возвращённый при получении ресурса.

PerformanceResourceTiming.transferSize Только для чтения

Число, представляющее размер (в октетах) полученного ресурса. Размер включает в себя поля заголовка ответа и тело полезной нагрузки ответа.

PerformanceResourceTiming.serverTiming Только для чтения

Массив записей PerformanceServerTiming, содержащих метрики времени сервера.

PerformanceResourceTiming.toJSON()

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

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

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

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

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

const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  console.log(entry);
});

Многие свойства времени обработки ресурсов ограничены и возвращают 0 или пустую строку, когда ресурс является кросс-доменным запросом. Чтобы предоставить информацию о времени обработки кросс-доменных запросов, необходимо установить HTTP-заголовок Timing-Allow-Origin.

Например, чтобы позволить https://developer.mozilla.org видеть информацию о времени обработки ресурсов, кросс-доменный ресурс должен отправлять:

Timing-Allow-Origin: https://developer.mozilla.org

• Замер производительности ресурсов (Обзор)