PerformanceResourceTiming: finalResponseHeadersStart-Eigenschaft

Wert

Die Eigenschaft finalResponseHeadersStart kann die folgenden Werte haben:

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

Beispiele

Messung der Anforderungszeit

Die Eigenschaften finalResponseHeadersStart und requestStart können verwendet werden, um zu messen, wie lange es dauert, bis der Browser die endgültige Antwort empfängt, nachdem die Anfrage gesendet wurde.

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 Performance-Zeitleiste des Browsers aufgezeichnet werden. Die Option buffered wird verwendet, um auf Einträge zuzugreifen, die vor der Erstellung des Observers vorhanden sind.

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-Performance-Einträge anzeigt, die in der Performance-Zeitleiste des Browsers zum Zeitpunkt des Methodenaufrufs 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 die Zeit zwischen den ersten und den endgültigen Antwort-Headern gemessen wird.

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

Timing-Informationen bei Cross-Origin

Wenn der Wert der finalResponseHeadersStart-Eigenschaft 0 ist, könnte die Ressource eine Cross-Origin-Anfrage sein. Um Timing-Informationen für Cross-Origin sichtbar zu machen, muss der Timing-Allow-Origin HTTP-Antwortheader gesetzt sein.

Ein 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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Timing-Allow-Origin
• firstInterimResponseStart