PerformanceEntry.toJSON() — Methode · JavaScript-Referenz

Signatur

PerformanceEntry.prototype.toJSON()

Beschreibung

toJSON() ist der Standard-Serialisierer von PerformanceEntry. Die Methode liefert ein gewöhnliches JavaScript-Objekt (kein JSON-String) mit den Werten name, entryType, startTime und duration. Unterklassen wie PerformanceResourceTiming, PerformanceNavigationTiming, PerformanceMark oder PerformanceEventTiming überschreiben die Methode und nehmen ihre zusätzlichen Eigenschaften mit auf, zum Beispiel transferSize, domContentLoadedEventEnd oder detail.

Gebraucht wird das vor allem, weil Performance-Einträge Getter auf dem Prototyp haben. Object.keys() oder der Spread-Operator ({...entry}) liefern deshalb ein leeres Objekt. JSON.stringify() ruft toJSON() dagegen automatisch auf, sodass Messwerte zuverlässig serialisiert werden.

Typische Einsätze sind das Senden von Messwerten an einen Analyse-Endpunkt (Real User Monitoring), etwa mit navigator.sendBeacon(), das Speichern in localStorage oder eine übersichtliche Ausgabe mit console.table().

Rückgabewert

Typ

object

Beschreibung

Ein einfaches Objekt mit allen serialisierbaren Eigenschaften des Eintrags, mindestens name, entryType, startTime und duration. Bei Unterklassen kommen deren eigene Felder hinzu.

Beispiele

Eigene Messmarke serialisieren

performance.mark('app-start');
const [entry] = performance.getEntriesByName('app-start');

const plain = entry.toJSON();
console.log(plain);

// Spread liefert dagegen nichts, weil die Werte über Getter kommen
console.log({ ...entry });

{ name: 'app-start', entryType: 'mark', startTime: 42.3, duration: 0, detail: null } {}

Ressourcen-Timings an einen Analyse-Endpunkt senden

const observer = new PerformanceObserver((list) => {
  // JSON.stringify ruft toJSON() für jeden Eintrag automatisch auf
  const payload = JSON.stringify(list.getEntries());
  navigator.sendBeacon('/analytics/resources', payload);
});

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

Navigations-Timing gezielt auswerten

const [nav] = performance.getEntriesByType('navigation');
const { name, duration, domContentLoadedEventEnd, transferSize } = nav.toJSON();

console.table({ name, duration, domContentLoadedEventEnd, transferSize });

Tabelle mit URL, Gesamtdauer, DOMContentLoaded-Zeitpunkt und übertragener Größe

Verwendung in Node.js

import { performance } from 'node:perf_hooks';

performance.mark('start');
await new Promise((r) => setTimeout(r, 50));
const measure = performance.measure('wartezeit', 'start');

console.log(JSON.stringify(measure.toJSON()));

{"name":"wartezeit","entryType":"measure","startTime":31.2,"duration":50.8,"detail":null}

// Wichtig · Fallstricke

Kein String: toJSON() gibt trotz des Namens ein Objekt zurück. Einen JSON-String erhältst du erst mit JSON.stringify().
Spread und Object.keys() funktionieren nicht: Die Eigenschaften sind Getter auf dem Prototyp. Nur toJSON() bzw. JSON.stringify() liefern die Werte zuverlässig.
detail bei PerformanceMark/PerformanceMeasure: Das Feld wird unverändert übernommen. Nicht serialisierbare Inhalte wie Funktionen oder zirkuläre Referenzen gehen beim späteren JSON.stringify() verloren oder werfen einen Fehler.
Datenschutz: Ressourcen-Einträge enthalten vollständige URLs, eventuell mit Query-Parametern wie Tokens. Vor dem Versand an Dritte solltest du sie bereinigen. Bei fremden Ressourcen ohne Timing-Allow-Origin-Header sind viele Zeitwerte 0.
Genauigkeit: Zeitwerte werden wegen Spectre-Schutzmaßnahmen vom Browser gerundet. Wie fein, hängt von Browser und Cross-Origin-Isolation ab.
Kompatibilität: Wird von allen modernen Browsern und von Node.js unterstützt. Welche zusätzlichen Felder Unterklassen ausgeben, kann sich je nach Browser leicht unterscheiden.

Siehe auch

Performance.mark() JSON.stringify() Performance.toJSON() PerformanceTiming.toJSON() PerformanceEventTiming.toJSON()