Signatur
Beschreibung
Die Methode toJSON() der Schnittstelle PerformanceEventTiming ist ein Serialisierer. Sie gibt ein einfaches JavaScript-Objekt zurück, das alle Eigenschaften des Eintrags enthält. Aus der Event Timing API gehören dazu name, entryType, startTime, duration, processingStart, processingEnd, cancelable und interactionId. Das DOM-Element target ist nicht enthalten, weil sich Knoten nicht serialisieren lassen.
Gebraucht wird die Methode vor allem im Real User Monitoring (RUM): Man beobachtet Einträge vom Typ "event" oder "first-input" mit einem PerformanceObserver, zum Beispiel um die Kennzahl Interaction to Next Paint (INP) zu ermitteln. Die Einträge schickt man dann als JSON an einen Analyse-Server. Die Instanz selbst ist ein Host-Objekt mit Getter-Eigenschaften auf dem Prototyp. Deshalb geben der Spread-Operator oder Object.keys() kein brauchbares Ergebnis zurück. Mit toJSON() erhält man dagegen die Werte als eigene Eigenschaften eines einfachen Objekts.
JSON.stringify() ruft toJSON() automatisch auf. In den meisten Fällen genügt also JSON.stringify(entry). Ein direkter Aufruf lohnt sich, wenn du das Objekt vor dem Versand noch anreichern oder filtern willst.
Rückgabewert
PerformanceEventTimingJSON) mit den serialisierbaren Eigenschaften des Eintrags: name, entryType, startTime, duration, processingStart, processingEnd, cancelable und interactionId. target ist nicht enthalten.Beispiele
Event-Einträge beobachten und serialisieren
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
// Einfaches Objekt mit allen Timing-Werten
console.log(entry.toJSON());
}
});
// Nur Events ab 16 ms Dauer melden (Minimum laut Spezifikation)
observer.observe({ type: 'event', buffered: true, durationThreshold: 16 });JSON.stringify ruft toJSON() automatisch auf
new PerformanceObserver((list) => {
const [entry] = list.getEntries();
// Beide Varianten liefern denselben JSON-String
console.log(JSON.stringify(entry) === JSON.stringify(entry.toJSON()));
// Spread funktioniert NICHT, da die Werte Prototyp-Getter sind
console.log(Object.keys({ ...entry }).length);
}).observe({ type: 'first-input', buffered: true });Langsame Interaktionen per sendBeacon an RUM-Server senden
const slowInteractions = [];
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.interactionId && entry.duration > 200) {
slowInteractions.push({
...entry.toJSON(),
// target selbst ist nicht serialisierbar, daher nur eine Beschreibung
target: entry.target?.tagName ?? null,
page: location.pathname,
});
}
}
}).observe({ type: 'event', buffered: true, durationThreshold: 16 });
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden' && slowInteractions.length) {
navigator.sendBeacon('/rum/inp', JSON.stringify(slowInteractions));
slowInteractions.length = 0;
}
});// Wichtig · Fallstricke
- Kein
target: Das verknüpfte DOM-Element fehlt im Ergebnis. Willst du es auswerten, leite selbst einen Bezeichner ab (z. B.tagName,idoder einen CSS-Selektor). - Spread und
Object.assign()liefern ein leeres Objekt, weil die Eigenschaften Getter auf dem Prototyp sind. Verwende stattdessentoJSON(). - Zeitwerte sind
DOMHighResTimeStamp-Werte relativ zuperformance.timeOrigin. Aus Datenschutzgründen werden sie gerundet,durationauf 8 ms. Für absolute Zeitpunkte addierst duperformance.timeOrigin. interactionIdist in älteren Browserversionen möglicherweise nicht enthalten.- Kompatibilität: Die Event Timing API wird von Chromium-Browsern ab Version 76 und von Firefox ab 89 unterstützt, von Safari erst in neueren Versionen. Prüfe die Unterstützung vorher, z. B. mit
PerformanceObserver.supportedEntryTypes.includes('event'). - Einträge werden nur für Events gemeldet, deren Dauer den Schwellenwert erreicht (standardmäßig 104 ms, Minimum 16 ms über
durationThreshold).