PerformanceResourceTiming: свойство fetchStart

Чтение-только свойство fetchStart представляет собой timestamp непосредственно перед началом браузером загрузки ресурса.

Если есть HTTP-редиректы, свойство возвращает время непосредственно перед началом работы пользовательского агента по загрузке конечного ресурса в цепочке редиректов.

В отличие от многих других PerformanceResourceTiming свойств, свойство fetchStart доступно для запросов к ресурсам других доменов без необходимости в HTTP-заголовке Timing-Allow-Origin.

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

Свойства fetchStart и responseEnd можно использовать для измерения общего времени загрузки конечного ресурса (без редиректов). Если вы хотите учесть редиректы, общее время загрузки указано в свойстве duration.

const timeToFetch = entry.responseEnd - entry.fetchStart;

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

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const timeToFetch = entry.responseEnd - entry.fetchStart;
    if (timeToFetch > 0) {
      console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
    }
  });
});

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

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

const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const timeToFetch = entry.responseEnd - entry.fetchStart;
  if (timeToFetch > 0) {
    console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
  }
});