Signatur
Beschreibung
toJSON() ist der Serializer der Schnittstelle PerformanceScriptTiming. Die Methode gibt ein einfaches Objekt zurück (keinen String), das die Eigenschaften des Eintrags als gewöhnliche Datenfelder enthält. JSON.stringify() ruft toJSON() automatisch auf. Ohne diese Methode würde ein Performance-Eintrag nur {} ergeben, weil seine Eigenschaften Getter auf dem Prototyp sind und keine eigenen Eigenschaften der Instanz.
PerformanceScriptTiming-Einträge gehören zur Long Animation Frames API (LoAF). Sie stecken im Array scripts eines PerformanceLongAnimationFrameTiming-Eintrags und beschreiben Skripte, die zu einem langen Animationsframe beigetragen haben. Wichtige Felder sind invoker, invokerType, sourceURL, sourceFunctionName, executionStart, forcedStyleAndLayoutDuration und pauseDuration. Dazu kommen die geerbten Felder name, entryType ("script"), startTime und duration.
In der Praxis braucht man toJSON() vor allem für die Real-User-Monitoring-Telemetrie (RUM): Man sammelt Daten zu langen Frames im Browser und schickt sie per navigator.sendBeacon() oder fetch() an einen Analyse-Server. Auch zum schnellen Protokollieren in der Konsole ist die Methode nützlich.
Rückgabewert
name, entryType, startTime, duration, invoker, invokerType, executionStart, forcedStyleAndLayoutDuration, pauseDuration, sourceURL, sourceFunctionName und sourceCharPosition. Die Eigenschaft window fehlt, weil sich ein Window-Objekt nicht als JSON darstellen lässt.Beispiele
Skript-Einträge langer Frames als JSON protokollieren
const observer = new PerformanceObserver((list) => {
for (const frame of list.getEntries()) {
for (const script of frame.scripts) {
// toJSON() liefert ein einfaches Objekt
console.log(script.toJSON());
}
}
});
observer.observe({ type: 'long-animation-frame', buffered: true });JSON.stringify() ruft toJSON() automatisch auf
const [frame] = performance.getEntriesByType('long-animation-frame');
if (frame && frame.scripts.length > 0) {
const script = frame.scripts[0];
// Ohne toJSON() käme hier nur "{}" heraus
console.log(JSON.stringify(script, null, 2));
}Langsame Skripte per sendBeacon an einen RUM-Server melden
const slowScripts = [];
new PerformanceObserver((list) => {
for (const frame of list.getEntries()) {
for (const script of frame.scripts) {
if (script.duration > 50) {
// Nur die relevanten Felder übernehmen
const { invoker, invokerType, sourceURL, sourceFunctionName, duration, forcedStyleAndLayoutDuration } = script.toJSON();
slowScripts.push({ invoker, invokerType, sourceURL, sourceFunctionName, duration, forcedStyleAndLayoutDuration });
}
}
}
}).observe({ type: 'long-animation-frame', buffered: true });
// Beim Verlassen der Seite senden
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden' && slowScripts.length > 0) {
navigator.sendBeacon('/rum/loaf', JSON.stringify(slowScripts));
slowScripts.length = 0;
}
});// Wichtig · Fallstricke
- Kompatibilität: Die Long Animation Frames API und damit
PerformanceScriptTiminggibt es bisher nur in Chromium-Browsern (Chrome/Edge ab 123). Firefox und Safari unterstützen sie nicht. Vor der Nutzung sollte man die Unterstützung prüfen:PerformanceObserver.supportedEntryTypes.includes('long-animation-frame'). - Rückgabe ist kein String:
toJSON()gibt ein Objekt zurück. Einen JSON-String erzeugt erstJSON.stringify(). windowfehlt: Die Referenz auf das auslösendeWindowwird nicht mitserialisiert. Wer den Frame-Kontext braucht, muss ihn vorher selbst ablesen, z. B. überwindowAttribution.- Cross-Origin-Skripte: Bei fremden Skripten ohne CORS-Freigabe können
sourceURL,sourceFunctionNameund ähnliche Felder leer sein oder-1enthalten. Die Daten sind also unvollständig. - Datenschutz:
sourceURLundinvokerkönnen URLs mit Query-Parametern oder IDs enthalten. Vor dem Senden an externe Dienste sollte man sie bereinigen. - Das Array
scriptsenthält nur Skripte ab etwa 5 ms Laufzeit. Sehr kurze Skripte tauchen dort nicht auf.