PerformanceResourceTiming: свойство responseEnd

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

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

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

Свойства responseEnd и fetchStart могут быть использованы для измерения общего времени загрузки конечного ресурса (без переадресаций). Если вы хотите включить переадресации, общее время загрузки предоставляется в свойстве 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`);
  }
});