PerformanceResourceTiming: firstInterimResponseStart-Eigenschaft

Die firstInterimResponseStart-Eigenschaft kann folgende Werte haben:

• Ein DOMHighResTimeStamp unmittelbar nachdem der Browser die ersten vorläufigen Bytes der Antwort vom Server empfängt.
• 0, wenn die Ressource keine vorläufige Antwort gesendet hat
• 0, wenn es sich bei der Ressource um eine Cross-Origin-Anfrage handelt und kein Timing-Allow-Origin HTTP-Response-Header verwendet wird.

Die firstInterimResponseStart- und requestStart-Eigenschaften können verwendet werden, um zu messen, wie lange es dauert, bis der Browser eine vorläufige Antwort nach dem Senden der Anfrage erhält.

const request = entry.firstInterimResponseStart - entry.requestStart;

Das folgende Beispiel verwendet einen PerformanceObserver, um über neue resource-Performance-Einträge zu informieren, sobald sie in der Leistungstimeline des Browsers aufgezeichnet werden. Die Option buffered 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.firstInterimResponseStart - entry.requestStart;
    if (request > 0) {
      console.log(`${entry.name}: Interim response time: ${request}ms`);
    }
  });
});

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

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

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

Wenn der Wert der firstInterimResponseStart-Eigenschaft 0 ist, könnte die Ressource eine Cross-Origin-Anfrage sein. Um Cross-Origin-Zeiteninformationen sehen zu können, muss der Timing-Allow-Origin HTTP-Response-Header gesetzt werden.

Zum Beispiel sollte die Cross-Origin-Ressource Folgendes senden, um https://developer.mozilla.org den Zugriff auf Zeiteninformationen zu erlauben:

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

• Timing-Allow-Origin