PerformanceServerTiming.duration — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceServerTiming.duration

Beschreibung

PerformanceServerTiming.duration enthält den Wert des dur-Parameters einer Metrik aus dem HTTP-Antwort-Header Server-Timing. Der Server schreibt dort zum Beispiel Server-Timing: db;dur=53.2;desc="Datenbank". Im Browser landet der Wert 53.2 dann in der Eigenschaft duration des passenden PerformanceServerTiming-Objekts.

So kommen serverseitige Messwerte wie Datenbankabfragen, Cache-Treffer oder Renderzeit direkt im Frontend an. Dort kann man sie mit den clientseitigen Werten aus PerformanceResourceTiming bzw. PerformanceNavigationTiming zusammenführen und an ein Monitoring-System (RUM) senden. Die Objekte erreicht man über die Eigenschaft serverTiming eines Navigations- oder Ressourcen-Eintrags.

Die Einheit legt allein der Server fest. Üblich sind Millisekunden, aber der Browser prüft das nicht. Fehlt dur oder lässt sich der Wert nicht als Zahl lesen, ist duration gleich 0. Deshalb lässt sich „keine Dauer angegeben“ nicht von „Dauer 0“ unterscheiden.

Beispiele

Server-Timing der aktuellen Seitennavigation auslesen

// Server sendet z. B.: Server-Timing: db;dur=53.2, app;dur=47.1;desc="Rendern", cache;desc="HIT"
const [nav] = performance.getEntriesByType('navigation');

for (const metric of nav?.serverTiming ?? []) {
  console.log(`${metric.name}: ${metric.duration} ms (${metric.description})`);
}

db: 53.2 ms () app: 47.1 ms (Rendern) cache: 0 ms (HIT)

Ressourcen laufend mit PerformanceObserver überwachen

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const total = entry.serverTiming.reduce((sum, m) => sum + m.duration, 0);
    if (total > 0) {
      console.log(`${entry.name}: Serverzeit ${total.toFixed(1)} ms`);
    }
  }
});

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

https://example.com/api/produkte: Serverzeit 112.4 ms

Serverzeit mit der Zeit bis zum ersten Byte vergleichen und melden

const [nav] = performance.getEntriesByType('navigation');
const ttfb = nav.responseStart - nav.requestStart;

const serverMetrics = Object.fromEntries(
  nav.serverTiming.map(({ name, duration }) => [name, duration])
);

const payload = { ttfb: Math.round(ttfb), ...serverMetrics };
navigator.sendBeacon('/rum', JSON.stringify(payload));
console.log(payload);

{ ttfb: 180, db: 53.2, app: 47.1 }

// Wichtig · Fallstricke

Cross-Origin: Bei Ressourcen von fremden Ursprüngen ist serverTiming ein leeres Array, es sei denn, der Server sendet Timing-Allow-Origin mit Ihrem Ursprung oder *.
Nur sichere Kontexte: serverTiming gibt es nur über HTTPS (bzw. localhost).
Wert 0 ist mehrdeutig: Fehlt dur oder ist der Wert ungültig, liefert duration ebenfalls 0. Wer das unterscheiden muss, sollte zusätzlich description auswerten oder serverseitig immer dur senden.
Einheit nicht garantiert: Millisekunden sind nur üblich, nicht vorgeschrieben. Legen Sie die Einheit mit dem Backend-Team fest.
Datenschutz: Server-Timing-Werte sind für jeden Client sichtbar. Geben Sie daher keine internen Details (Hostnamen, Abfragen) und keine Zeiten preis, die Rückschlüsse auf Nutzerdaten zulassen (Timing-Angriffe).
Schreibgeschützt: Zuweisungen werden stillschweigend ignoriert, im Strict Mode lösen sie einen TypeError aus.
Trailer: Server-Timing als HTTP-Trailer wird von Browsern kaum unterstützt. Senden Sie den Header am besten vor dem Antwortkörper.

Siehe auch

PerformanceElementTiming.naturalWidth PerformanceServerTiming.description PerformanceServerTiming.name PerformanceScriptTiming.pauseDuration PerformanceEntry.duration