PerformanceResourceTiming: finalResponseHeadersStart-Eigenschaft

Die finalResponseHeadersStart-Eigenschaft kann folgende Werte haben:

• Ein DOMHighResTimeStamp, unmittelbar nachdem der Browser die ersten Bytes der endgültigen Antwort vom Server erhalten hat.
• 0, falls die Ressource eine Cross-Origin-Anfrage ist und kein Timing-Allow-Origin HTTP-Antwortheader 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-Leistungseinträge zu informieren, sobald sie in der Leistungszeitleiste des Browsers aufgezeichnet werden. Die buffered-Option wird verwendet, um auf Einträge aus der Zeit 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(), das nur resource-Leistungseinträge zeigt, die zum Zeitpunkt des Aufrufs der Methode in der Leistungszeitleiste des Browsers 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 endgültigen Antwort-Headern 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 finalResponseHeadersStart-Eigenschaft 0 ist, könnte die Ressource eine Cross-Origin-Anfrage sein. Um Cross-Origin-Timing-Informationen anzeigen zu können, muss der Timing-Allow-Origin HTTP-Antwortheader gesetzt werden.

Zum Beispiel, um https://developer.mozilla.org zu erlauben, Timing-Ressourcen zu sehen, sollte die Cross-Origin-Ressource senden:

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

• Timing-Allow-Origin
• firstInterimResponseStart