PerformanceResourceTiming: finalResponseHeadersStart-Eigenschaft

Wert

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 anforderungsübergreifende Anfrage ist und kein Timing-Allow-Origin HTTP-Antwort-Header 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 beginnt, die endgültige Antwort nach dem Senden der Anfrage zu erhalten.

const request = entry.finalResponseHeadersStart - entry.requestStart;

Das folgende Beispiel verwendet einen PerformanceObserver, um über neue resource-Performance-Einträge zu informieren, sobald sie in der Performance-Timeline des Browsers aufgezeichnet werden. Die buffered-Option wird verwendet, um auf Einträge zuzugreifen, die vor der Erstellung des Observers vorhanden waren.

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 zeigt, die zum Zeitpunkt des Aufrufs der Methode in der Performance-Timeline 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 letzten 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 });

Anforderungsübergreifende Zeitinformationen

Wenn der Wert der finalResponseHeadersStart-Eigenschaft 0 ist, könnte die Ressource eine anforderungsübergreifende Anfrage sein. Um die anforderungsübergreifenden Zeitinformationen einzusehen, muss der Timing-Allow-Origin HTTP-Antwort-Header gesetzt werden.

Zum Beispiel, um https://developer.mozilla.org den Zugriff auf Zeit-Ressourcen zu ermöglichen, sollte die anforderungsübergreifende Ressource senden:

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Timing-Allow-Origin
• firstInterimResponseStart