PerformanceServerTiming.name — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceServerTiming.name

Beschreibung

Die Eigenschaft name eines PerformanceServerTiming-Objekts enthält den Namen einer Metrik, die der Server im HTTP-Antwort-Header Server-Timing übermittelt hat. Bei einem Header wie Server-Timing: db;dur=53;desc="Datenbank" ist name der Wert "db".

Die Objekte bekommst du über die Eigenschaft serverTiming von PerformanceResourceTiming- und PerformanceNavigationTiming-Einträgen. Mit dem Namen kannst du Backend-Messwerte wie Datenbankzeit, Cache-Status oder Renderzeit gezielt herausfiltern und zusammen mit den Frontend-Messwerten an dein Monitoring (RUM) schicken.

Die Eigenschaft ist schreibgeschützt. Enthält eine Header-Angabe nur einen Namen ohne dur und desc, bekommst du trotzdem einen Eintrag: duration ist dann 0 und description ein leerer String.

Rückgabewert

Typ

string

Beschreibung

Der Metrikname aus dem Server-Timing-Header, z. B. "db", "cache" oder "app".

Beispiele

Server-Timing-Metriken der Hauptseite auslesen

// Server antwortete mit: Server-Timing: db;dur=53, app;dur=47.2, 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 ms () app: 47.2 ms () cache: 0 ms (hit)

Eine bestimmte Metrik anhand des Namens finden

const getServerMetric = (entry, name) =>
  entry.serverTiming.find((m) => m.name === name);

const [nav] = performance.getEntriesByType('navigation');
const db = getServerMetric(nav, 'db');

if (db) {
  console.log(`Datenbankzeit: ${db.duration} ms`);
} else {
  console.log('Keine db-Metrik vorhanden');
}

Datenbankzeit: 53 ms

Metriken von API-Aufrufen mit PerformanceObserver sammeln

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.name.includes('/api/')) continue;
    const metrics = Object.fromEntries(
      entry.serverTiming.map(({ name, duration }) => [name, duration])
    );
    console.log(entry.name, metrics);
  }
});

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

await fetch('/api/users');

https://example.com/api/users { db: 12.4, auth: 3.1 }

// Wichtig · Fallstricke

Cross-Origin: Bei Ressourcen von fremden Ursprüngen bleibt serverTiming leer, solange der Server nicht zusätzlich Timing-Allow-Origin sendet (z. B. Timing-Allow-Origin: https://example.com).
Nur sichere Kontexte: Server-Timing-Daten gibt es nur über HTTPS (und localhost).
Datenschutz/Sicherheit: Jeder Skript-Code auf der Seite kann die Namen und Beschreibungen lesen. Schicke keine internen Details wie Hostnamen, SQL-Abfragen oder Benutzerdaten im Header mit.
Namen sind nicht eindeutig. Kommt derselbe Name mehrfach im Header vor, entstehen mehrere Einträge mit gleichem name. find() liefert dann nur den ersten davon.
Ob der Name nur aus zulässigen Zeichen (Token-Syntax) besteht, prüft der Server nicht. Ungültige Header-Teile ignoriert der Browser stillschweigend.
Die Eigenschaft wird auch in Web Workern unterstützt. Safari unterstützt sie erst seit Version 16.4.

Siehe auch

PerformanceElementTiming.paintTime PerformanceServerTiming.duration PerformanceServerTiming.description PerformanceEventTiming.target PerformanceScriptTiming.invoker