PerformanceResourceTiming: finalResponseHeadersStart-Eigenschaft

Die finalResponseHeadersStart-Eigenschaft kann die folgenden Werte haben:

• Ein DOMHighResTimeStamp unmittelbar nachdem der Browser die ersten Bytes der endgültigen Antwort vom Server erhält.
• 0, wenn die Ressource eine Cross-Origin-Anfrage ist und kein Timing-Allow-Origin-HTTP-Antwort-Header verwendet wird.

Die Eigenschaften finalResponseHeadersStart und requestStart können verwendet werden, um zu messen, wie lange es dauert, bis der Browser beginnt, die endgültige Antwort nach dem Senden der Anfrage zu empfangen.

const request = entry.finalResponseHeadersStart - entry.requestStart;

Das folgende Beispiel verwendet einen PerformanceObserver, um über neue resource-Performance-Einträge zu benachrichtigen, sobald sie in der Leistungszeitleiste des Browsers erfasst werden. Die buffered-Option wird verwendet, um auf Einträge von vor der Erstellung des Observers zuzugreifen.

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 });

Das folgende Beispiel verwendet Performance.getEntriesByType(), welches nur resource-Performance-Einträge zeigt, die in der Leistungszeitleiste des Browsers zum Zeitpunkt des Aufrufs der Methode vorhanden sind.

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`);
  }
});

Das folgende Beispiel zeigt, wie man die Zeit zwischen den ersten und letzten Antwortheadern misst.

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 });

Wenn der Wert der Eigenschaft finalResponseHeadersStart 0 ist, könnte es sich um eine Cross-Origin-Anfrage handeln. Um Timing-Informationen über Cross-Origin-Ressourcen zu erhalten, muss der Timing-Allow-Origin-HTTP-Antwort-Header gesetzt werden.

Um beispielsweise https://developer.mozilla.org das Anzeigen von Timing-Ressourcen zu erlauben, sollte die Cross-Origin-Ressource senden:

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

• Timing-Allow-Origin
• firstInterimResponseStart