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

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
serverTiming

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Siehe auch