PerformanceTiming.toJSON() — Methode · JavaScript-Referenz

Signatur

PerformanceTiming.prototype.toJSON()

Beschreibung

Die Methode toJSON() der veralteten Schnittstelle PerformanceTiming ist ein Serializer. Sie gibt ein gewöhnliches JavaScript-Objekt zurück, das alle Timing-Eigenschaften wie navigationStart, domainLookupStart, responseEnd, domContentLoadedEventEnd oder loadEventEnd als Zahlen enthält. Das sind Millisekunden seit der Unix-Epoche.

Das ist nötig, weil die Eigenschaften von PerformanceTiming als Getter auf dem Prototyp liegen und nicht als eigene Eigenschaften der Instanz. Ohne toJSON() würde Object.keys(performance.timing) ein leeres Array liefern. JSON.stringify(performance.timing) ruft toJSON() automatisch auf und liefert deshalb trotzdem vollständiges JSON.

Typischerweise nutzt man die Methode, um Ladezeiten an einen Analyse-Endpunkt zu senden oder auszuwerten. Für neuen Code solltest du stattdessen PerformanceNavigationTiming verwenden, zum Beispiel über performance.getEntriesByType("navigation")[0].toJSON(). Diese Schnittstelle liefert hochauflösende, relative Zeitstempel.

Rückgabewert

Typ

Object

Beschreibung

Ein einfaches Objekt, dessen Eigenschaften den Attributen von PerformanceTiming entsprechen (z. B. navigationStart, fetchStart, responseEnd, loadEventEnd). Jede Eigenschaft ist eine Zahl (Epoch-Millisekunden) oder 0, wenn das Ereignis noch nicht eingetreten ist.

Beispiele

Timing-Daten als Objekt auslesen

const timing = performance.timing.toJSON();
console.log(Object.keys(timing).length > 0);
console.log(typeof timing.navigationStart);

true number

Ladezeiten nach dem load-Event berechnen

window.addEventListener('load', () => {
  // loadEventEnd ist erst nach Abschluss des load-Handlers gesetzt
  setTimeout(() => {
    const t = performance.timing.toJSON();
    const metriken = {
      dns: t.domainLookupEnd - t.domainLookupStart,
      ttfb: t.responseStart - t.navigationStart,
      domReady: t.domContentLoadedEventEnd - t.navigationStart,
      gesamt: t.loadEventEnd - t.navigationStart
    };
    console.table(metriken);
  }, 0);
});

Tabelle mit dns, ttfb, domReady, gesamt (in ms)

An Analyse-Endpunkt senden (implizit über JSON.stringify)

window.addEventListener('pagehide', () => {
  // JSON.stringify ruft toJSON() automatisch auf
  const payload = JSON.stringify({
    url: location.href,
    timing: performance.timing
  });
  navigator.sendBeacon('/analytics/timing', payload);
});

Moderner Ersatz: PerformanceNavigationTiming

const [nav] = performance.getEntriesByType('navigation');
if (nav) {
  const daten = nav.toJSON();
  console.log('TTFB:', Math.round(daten.responseStart), 'ms');
}

TTFB: 123 ms

// Wichtig · Fallstricke

Veraltet: PerformanceTiming und performance.timing sind in Navigation Timing Level 2 als veraltet markiert. Die Browser unterstützen sie weiterhin, für neuen Code solltest du aber PerformanceNavigationTiming nutzen.
Unterschiedliche Zeitbasis: Die Werte sind absolute Epoch-Millisekunden (ganzzahlig). Die Nachfolge-API liefert dagegen relative, hochauflösende Zeiten ab performance.timeOrigin. Die beiden Formate lassen sich nicht direkt mischen.
Werte können 0 sein: Wenn ein Ereignis noch nicht stattgefunden hat, ist der Wert 0. Das gilt zum Beispiel für loadEventEnd innerhalb des load-Handlers. Die Differenzen werden dann negativ oder unsinnig.
Nur eigene Eigenschaften nach Serialisierung: Object.keys() oder der Spread-Operator auf performance.timing liefern kein Ergebnis, weil die Werte Getter auf dem Prototyp sind. Rufe deshalb vorher toJSON() auf.
Die Methode existiert nur im Browser, nicht in Node.js.

Siehe auch

JSON.stringify() PerformanceLongTaskTiming.toJSON() PerformanceEventTiming.toJSON() PerformancePaintTiming.toJSON() Performance.toJSON()