PerformanceNavigationTiming.toJSON() — Methode · JavaScript-Referenz

Signatur

PerformanceNavigationTiming.prototype.toJSON()

Beschreibung

Die Methode toJSON() des Interfaces PerformanceNavigationTiming ist ein Serializer: Sie liefert ein einfaches JavaScript-Objekt (kein JSON-String!), das alle Zeitstempel und Metadaten der aktuellen Seitennavigation als eigene, aufzählbare Eigenschaften enthält – etwa domContentLoadedEventEnd, loadEventEnd, type, redirectCount, transferSize oder serverTiming.

Das ist nötig, weil die Eigenschaften eines PerformanceEntry als Getter auf dem Prototyp definiert sind. Ein direkter Aufruf von JSON.stringify(entry) funktioniert nur deshalb, weil JSON.stringify() automatisch toJSON() aufruft. Object.keys(entry) oder der Spread-Operator {...entry} liefern dagegen ein leeres Objekt – hier hilft ein expliziter Aufruf von toJSON().

Typische Einsatzzwecke sind das Real User Monitoring (RUM): Navigations-Metriken werden gesammelt und per navigator.sendBeacon() oder fetch() an einen Analyse-Server gesendet, in localStorage abgelegt oder in der Konsole übersichtlich per console.table() ausgegeben.

Rückgabewert

Typ

Object

Beschreibung

Ein einfaches Objekt mit allen Eigenschaften des PerformanceNavigationTiming-Eintrags (inklusive der geerbten Eigenschaften aus PerformanceResourceTiming und PerformanceEntry). Es ist kein String – für einen JSON-String muss JSON.stringify() verwendet werden.

Beispiele

Navigations-Eintrag als Objekt ausgeben

// Den Navigations-Eintrag der aktuellen Seite holen
const [nav] = performance.getEntriesByType("navigation");

const daten = nav.toJSON();
console.log(daten.type, daten.redirectCount);
console.log(Object.keys(daten).length > 0);

// Zum Vergleich: Spread ohne toJSON() liefert nichts
console.log(Object.keys({ ...nav }).length);

navigate 0 true 0

Metriken per sendBeacon an den Server senden

window.addEventListener("load", () => {
  // Kurz warten, damit loadEventEnd gesetzt ist
  setTimeout(() => {
    const [nav] = performance.getEntriesByType("navigation");
    if (!nav) return;

    const { name, type, domContentLoadedEventEnd, loadEventEnd, transferSize } = nav.toJSON();
    const payload = JSON.stringify({
      seite: name,
      typ: type,
      dcl: Math.round(domContentLoadedEventEnd),
      load: Math.round(loadEventEnd),
      bytes: transferSize
    });

    navigator.sendBeacon("/api/rum", payload);
  }, 0);
});

Mit PerformanceObserver und console.table

const observer = new PerformanceObserver((liste) => {
  for (const eintrag of liste.getEntries()) {
    const { serverTiming, ...rest } = eintrag.toJSON();
    console.table(rest);
    console.log("Server-Timing:", serverTiming);
  }
});

observer.observe({ type: "navigation", buffered: true });

(Tabelle mit allen Zeitwerten) Server-Timing: [...]

// Wichtig · Fallstricke

Kein String: toJSON() gibt ein Objekt zurück, keinen JSON-Text. Für die Übertragung ist JSON.stringify(nav) oder JSON.stringify(nav.toJSON()) nötig.
Zeitpunkt beachten: Wird die Methode vor Abschluss des load-Events aufgerufen, sind Werte wie loadEventEnd noch 0. Am besten in einem setTimeout nach load oder über einen PerformanceObserver auslesen.
Datenschutz/Cross-Origin: Bei Weiterleitungen über fremde Origins werden einige Werte (z. B. redirectStart, redirectCount) auf 0 gesetzt. Die im Objekt enthaltene name-URL kann Query-Parameter mit sensiblen Daten enthalten – vor dem Versand ggf. bereinigen.
Kompatibilität: Von allen modernen Browsern unterstützt; das veraltete performance.timing (PerformanceTiming) sollte nicht mehr verwendet werden. Die Eigenschaft serverTiming wird als Array von PerformanceServerTiming-Objekten (ebenfalls per toJSON() serialisiert) ausgegeben.

Siehe auch

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