PerformanceResourceTiming: свойство finalResponseHeadersStart

Свойство finalResponseHeadersStart для чтения только возвращает timestamp сразу после того, как браузер получит первый байт окончательного ответа документа (например, 200 OK) от сервера.

Это отличается от requestStart (которое также может быть представлено как firstInterimResponseStart), так как оно начинается с первых байтов любого ответа, включая промежуточные ответы (например, 103 Early Hints), при этом окончательный ответ может появиться значительно позже.

Если промежуточных ответов нет, requestStart совпадает с finalResponseHeadersStart, а firstInterimResponseStart равно 0.

Для finalResponseHeadersStart нет свойства end.

Свойство finalResponseHeadersStart может иметь следующие значения:

• Значение DOMHighResTimeStamp сразу после того, как браузер получит первые байты окончательного ответа от сервера.
• 0 если запрос является межсайтовым и не используется HTTP-заголовок ответа Timing-Allow-Origin.

Свойства finalResponseHeadersStart и requestStart можно использовать для измерения времени, которое требуется браузеру, чтобы начать получать окончательный ответ после отправки запроса.

const request = entry.finalResponseHeadersStart - entry.requestStart;

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

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

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

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

const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const request = entry.finalResponseHeadersStart - entry.requestStart;
  if (request > 0) {
    console.log(`${entry.name}: final response time: ${request}ms`);
  }
});

Следующий пример демонстрирует, как измерить время между первыми и последними заголовками ответа.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const diff = entry.finalResponseHeadersStart - entry.responseStart;
    if ((entry.finalResponseHeadersStart > 0) & (diff > 0)) {
      console.log(
        `${entry.name}: time between first and final response start: ${diff}ms`,
      );
    }
  });
});

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

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

Например, для разрешения https://developer.mozilla.org доступа к ресурсам времени межсайтовых запросов, ресурс должен отправлять:

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

• Timing-Allow-Origin
• firstInterimResponseStart