Signatur
Beschreibung
Die Methode toJSON() wandelt einen Eintrag der Long Animation Frames API (LoAF) in ein gewöhnliches JavaScript-Objekt um. Das Objekt enthält alle öffentlichen Eigenschaften des Eintrags: name, entryType ("long-animation-frame"), startTime, duration, renderStart, styleAndLayoutStart, firstUIEventTimestamp, blockingDuration und scripts.
Gebraucht wird das vor allem, wenn du Leistungsdaten an einen Analyse- oder Monitoring-Server schicken willst (Real User Monitoring, RUM). Die Eigenschaften eines PerformanceEntry liegen als Getter auf dem Prototyp und nicht als eigene Eigenschaften auf dem Objekt. Deshalb würde JSON.stringify() ohne toJSON() nur {} liefern. JSON.stringify() ruft toJSON() aber von selbst auf, wenn es die Methode findet.
Die Eigenschaft scripts ist ein Array aus PerformanceScriptTiming-Objekten. Diese haben ihre eigene toJSON()-Methode. Beim Serialisieren mit JSON.stringify() werden sie deshalb vollständig mit umgewandelt, also zum Beispiel mit invoker, sourceURL, sourceFunctionName und duration.
Rückgabewert
PerformanceLongAnimationFrameTiming-Eintrags, geeignet für die JSON-Serialisierung.Beispiele
Lange Animation-Frames als JSON ausgeben
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(entry.toJSON());
}
});
observer.observe({ type: 'long-animation-frame', buffered: true });Direkt mit JSON.stringify() serialisieren
const observer = new PerformanceObserver((list) => {
const [entry] = list.getEntries();
// JSON.stringify ruft toJSON() automatisch auf
console.log(JSON.stringify(entry, null, 2));
});
observer.observe({ type: 'long-animation-frame', buffered: true });LoAF-Daten per sendBeacon an einen RUM-Server senden
const buffer = [];
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
// Nur Frames mit spürbarer Blockierung melden
if (entry.blockingDuration > 50) {
buffer.push(entry.toJSON());
}
}
});
if (PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')) {
observer.observe({ type: 'long-animation-frame', buffered: true });
}
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden' && buffer.length > 0) {
navigator.sendBeacon('/analytics/loaf', JSON.stringify(buffer));
buffer.length = 0;
}
});// Wichtig · Fallstricke
- Kompatibilität: Die Long Animation Frames API gibt es nur in Chromium-Browsern ab Version 123. Firefox und Safari unterstützen sie nicht. Prüfe deshalb vorher, ob der Eintragstyp verfügbar ist:
PerformanceObserver.supportedEntryTypes.includes('long-animation-frame'). - Ohne
toJSON()bzw.JSON.stringify()bringenObject.keys(entry)und der Spread-Operator ({...entry}) nur ein leeres Ergebnis. Die Eigenschaften sind Getter auf dem Prototyp. - Das Array
scriptsenthält beim direkten Aufruf vontoJSON()weiterhinPerformanceScriptTiming-Objekte. Echte, flache JSON-Daten bekommst du erst mitJSON.stringify(). - Datenschutz:
sourceURLundsourceFunctionNameinscriptskönnen interne URLs oder Funktionsnamen offenlegen. Filtere die Daten vor dem Versand bei Bedarf. Für fremde Skripte ohne passende CORS-Freigabe liefert der Browser nur eingeschränkte Informationen. - Die Datenmenge kann groß werden. Sammle die Einträge, filtere sie (zum Beispiel nach
blockingDuration) und sende sie gebündelt.