Временные метки ресурсов

Временные метки ресурсов являются частью API производительности и позволяют получать и анализировать подробные данные о времени загрузки ресурсов приложения. Приложение может использовать метрики времени для определения, например, времени загрузки конкретного ресурса (такого как изображение или скрипт), как неявно в рамках загрузки страницы, так и явно из JavaScript, например, используя API fetch().

Каждый ресурс документа будет представлен записью PerformanceResourceTiming (расширяющей интерфейс PerformanceEntry) с типом entryType "resource".

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

Рисунок 1. Временные метки загрузки ресурсов (источник).

Приложение может получить временные метки для различных этапов загрузки ресурса. Временные метки, предоставляемые этим API, включают:

1. startTime: временная метка непосредственно перед началом процесса загрузки ресурса.
2. redirectStart: временная метка запроса, инициирующего перенаправление.
3. redirectEnd: временная метка непосредственно после получения последнего байта ответа на последнее перенаправление.
4. workerStart: временная метка непосредственно перед запуском потока Service Worker.
5. fetchStart: временная метка непосредственно перед тем, как браузер начинает загрузку ресурса.
6. domainLookupStart: временная метка непосредственно перед тем, как браузер начинает поиск доменного имени ресурса.
7. domainLookupEnd: временная метка непосредственно после завершения поиска доменного имени ресурса браузером.
8. connectStart: временная метка непосредственно перед тем, как пользовательский агент начинает установку соединения с сервером для получения ресурса.
9. secureConnectionStart: Если ресурс загружается через защищенное соединение, временная метка непосредственно перед началом процесса рукопожатия для защиты текущего соединения браузером.
10. connectEnd: временная метка непосредственно после завершения установления соединения с сервером для получения ресурса браузером.
11. requestStart: временная метка непосредственно перед началом запроса ресурса браузером у сервера, кэша или локального ресурса.
12. responseStart: временная метка непосредственно после получения браузером первого байта ответа от сервера, кэша или локального ресурса.
13. responseEnd: временная метка непосредственно после получения браузером последнего байта ресурса или непосредственно перед закрытием транспортного соединения, что произойдет раньше.

Интерфейс PerformanceResourceTiming имеет три свойства, которые можно использовать для получения данных о размере ресурса. Свойство transferSize возвращает размер (в байтах) полученного ресурса, включая поля заголовка ответа и тело полезной нагрузки ответа.

Свойство encodedBodySize возвращает размер (в октетах), полученный при загрузке (HTTP или кеш), тела полезной нагрузки, **до** удаления каких-либо примененных кодировок содержимого. decodedBodySize возвращает размер (в октетах), полученный при загрузке (HTTP или кеш), тела сообщения, **после** удаления любых примененных кодировок содержимого.

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

Информация, предоставляемая записями PerformanceResourceTiming, часто используется для расчётов, таких как:

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

Страницы справок PerformanceResourceTiming содержат примеры кода для измерения всех этих метрик. Как правило, код для измерения этих метрик выглядит так:

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const request = entry.responseStart - entry.requestStart;
    if (request > 0) {
      console.log(`${entry.name}: Request time: ${request}ms`);
    }
  });
});

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

Когда используется CORS, значения многих свойств временных отметок возвращаются нулевыми, если политика доступа сервера не разрешает совместное использование этих значений. Для этого сервер, предоставляющий ресурс, должен отправить заголовок HTTP ответа Timing-Allow-Origin со значением, указывающим на происхождение или происхождения, которым разрешено получать ограниченные значения временных отметок.

Свойства, которые по умолчанию возвращают 0 при загрузке ресурса из происхождения, отличного от происхождения веб-страницы: redirectStart, redirectEnd, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart, и responseStart.

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

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

Если ваш сайт или приложение загружает более 250 ресурсов, и вы хотите записать более 250 записей PerformanceResourceTiming, вам необходимо увеличить размер буфера временных меток ресурсов.

Чтобы установить размер буфера данных производительности браузера, используйте метод Performance.setResourceTimingBufferSize(). Чтобы очистить буфер данных производительности браузера, используйте метод Performance.clearResourceTimings().

Чтобы получить уведомление о том, что буфер временных меток ресурсов браузера заполнен, подпишитесь на событие resourcetimingbufferfull.

Следующий вызов позволяет сохранить 500 записей "resource" производительности во временной шкале производительности браузера.

performance.setResourceTimingBufferSize(500);

Дополнительную информацию можно найти также в разделе Управление размерами буферов.

• PerformanceResourceTiming
• Timing-Allow-Origin
• Performance.setResourceTimingBufferSize()
• Performance.clearResourceTimings()