Performance.timing — Eigenschaft · JavaScript-Referenz

Signatur

get Performance.timing

Beschreibung

performance.timing liefert ein PerformanceTiming-Objekt. Es enthält Zeitstempel für die einzelnen Phasen beim Laden eines Dokuments, zum Beispiel navigationStart, domainLookupStart, connectEnd, responseStart, domInteractive, domContentLoadedEventEnd und loadEventEnd. Alle Werte sind Millisekunden seit der UNIX-Epoche als ganze Zahlen. Ein Wert von 0 bedeutet, dass die jeweilige Phase noch nicht erreicht wurde oder nicht stattgefunden hat.

Die Eigenschaft gehört zur ersten Fassung der Navigation-Timing-Spezifikation (Level 1) und gilt inzwischen als veraltet. Ihr Nachfolger ist PerformanceNavigationTiming, das man über performance.getEntriesByType("navigation") oder einen PerformanceObserver abruft. Dort sind die Werte hochauflösende Zeitstempel (DOMHighResTimeStamp) relativ zu performance.timeOrigin, mit Nachkommastellen.

Praktisch ist performance.timing heute nur noch in Altcode oder als Rückfallebene für sehr alte Browser. Typische Kennzahlen bildet man aus Differenzen, etwa DNS-Dauer (domainLookupEnd - domainLookupStart), Zeit bis zum ersten Byte (responseStart - navigationStart) oder die gesamte Ladezeit (loadEventEnd - navigationStart).

Rückgabewert

Typ

PerformanceTiming

Beschreibung

Schreibgeschütztes Objekt mit Zeitstempeln (Millisekunden seit der Epoche) für die Navigations- und Ladephasen des aktuellen Dokuments.

Beispiele

Ladezeit-Kennzahlen nach dem load-Event berechnen

window.addEventListener('load', () => {
  // loadEventEnd ist erst gesetzt, nachdem der load-Handler fertig ist
  setTimeout(() => {
    const t = performance.timing;
    const kennzahlen = {
      dns: t.domainLookupEnd - t.domainLookupStart,
      tcp: t.connectEnd - t.connectStart,
      ttfb: t.responseStart - t.navigationStart,
      domBereit: t.domContentLoadedEventEnd - t.navigationStart,
      gesamt: t.loadEventEnd - t.navigationStart
    };
    console.table(kennzahlen);
  }, 0);
});

Tabelle mit z. B. dns: 12, tcp: 35, ttfb: 180, domBereit: 640, gesamt: 1210 (Werte in ms, abhängig von Seite und Netz)

Moderne Alternative mit Rückfall auf performance.timing

const ermittleTTFB = () => {
  const [nav] = performance.getEntriesByType('navigation');
  if (nav) {
    // Navigation Timing Level 2: relativ zu timeOrigin, hochauflösend
    return Math.round(nav.responseStart);
  }
  // Rückfall für sehr alte Browser
  const t = performance.timing;
  return t.responseStart - t.navigationStart;
};

console.log(`Time to First Byte: ${ermittleTTFB()} ms`);

Time to First Byte: 178 ms

Noch nicht erreichte Phasen erkennen

const t = performance.timing;
// Direkt im <head>-Skript ausgeführt: load ist noch nicht passiert
console.log(t.navigationStart > 0);   // Startzeit ist gesetzt
console.log(t.loadEventEnd);          // 0 = Phase noch nicht erreicht
console.log(new Date(t.navigationStart).toISOString());

true 0 2024-05-14T09:31:02.417Z

// Wichtig · Fallstricke

Veraltet: Neuer Code sollte PerformanceNavigationTiming nutzen, also performance.getEntriesByType("navigation") oder einen PerformanceObserver mit type: "navigation". Die Eigenschaft ist zwar noch in allen gängigen Browsern vorhanden, kann aber irgendwann entfernt werden.
Unterschiedliche Zeitbasis: Die Werte von performance.timing sind absolute Epoche-Millisekunden als ganze Zahlen. performance.now() und die Level-2-Einträge sind dagegen relativ zu timeOrigin. Werte aus beiden Quellen nicht direkt miteinander verrechnen.
Wert 0: Wenn eine Phase noch nicht stattgefunden hat, steht der Wert auf 0. loadEventEnd etwa ist erst nach Abschluss aller load-Handler gesetzt. Wer es innerhalb des Handlers ausliest, bekommt negative oder unsinnige Differenzen.
Bei Weiterleitungen über andere Ursprünge oder bei Zwischenspeicherung (Cache) können einzelne Werte wie redirectStart oder secureConnectionStart ebenfalls 0 sein.
Die Eigenschaft gibt es nur im Fenster-Kontext, nicht in Web Workern. In Node.js steht sie nicht zur Verfügung.

Siehe auch

Performance.now() Performance.navigation PerformanceElementTiming.url Performance.memory Performance.timeOrigin