PerformanceResourceTiming: serverTiming-Eigenschaft

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Die serverTiming-Eigenschaft ist eine schreibgeschützte Eigenschaft, die ein Array von PerformanceServerTiming-Einträgen zurückgibt, die Server-Timing-Metriken enthalten.

Server-Timing-Metriken erfordern, dass der Server den Server-Timing-Header sendet. Zum Beispiel:

http
Server-Timing: cache;desc="Cache Read";dur=23.2

Die serverTiming-Einträge können sowohl in navigation- als auch in resource-Einträgen vorhanden sein.

Wert

Ein Array von PerformanceServerTiming-Einträgen.

Beispiele

Server-Timing-Einträge protokollieren

Sie können einen PerformanceObserver verwenden, um nach PerformanceServerTiming-Einträgen zu suchen. Die Dauer jedes Server-Eintrags wird in der Konsole protokolliert.

Beispiel eines PerformanceObserver, der benachrichtigt, wenn neue resource-Performance-Einträge in der Performance-Zeitleiste des Browsers aufgezeichnet werden. Verwenden Sie die buffered-Option, um auf Einträge zuzugreifen, die vor der Erstellung des Observers aufgetreten sind.

js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    entry.serverTiming.forEach((serverEntry) => {
      console.log(`${serverEntry.name} duration: ${serverEntry.duration}`);
    });
  });
});

["navigation", "resource"].forEach((type) =>
  observer.observe({ type, buffered: true }),
);

Beispiel unter Verwendung von Performance.getEntriesByType(), das nur resource-Performance-Einträge anzeigt, die zum Zeitpunkt des Aufrufs dieser Methode in der Performance-Zeitleiste des Browsers vorhanden sind:

js
for (const entryType of ["navigation", "resource"]) {
  for (const { name: url, serverTiming } of performance.getEntriesByType(
    entryType,
  )) {
    if (serverTiming) {
      for (const { name, duration } of serverTiming) {
        console.log(`${url}: ${name} duration: ${duration}`);
      }
    }
  }
}

Cross-Origin Server-Timing-Informationen

Der Zugriff auf Server-Timing-Informationen ist auf die gleiche Herkunft beschränkt. Um Timing-Informationen von anderen Ursprüngen freizugeben, muss der Timing-Allow-Origin-HTTP-Antwort-Header gesetzt werden.

Zum Beispiel, um https://developer.mozilla.org zu erlauben, Server-Timing-Informationen einzusehen, sollte die Ressource von einem anderen Ursprung senden:

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

Spezifikationen

Specification
Server Timing
# servertiming-attribute

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch