Signatur
Beschreibung
Die Eigenschaft sourceFunctionName eines PerformanceScriptTiming-Eintrags enthält den Namen der Funktion, die als Einstiegspunkt eines Skripts zu einem Long Animation Frame (LoAF, Frame mit mehr als 50 ms Laufzeit) beigetragen hat. Die Einträge erreichen Sie über das Array scripts eines PerformanceLongAnimationFrameTiming-Eintrags.
Zusammen mit sourceURL und sourceCharPosition können Sie genau feststellen, welcher Code das Rendering blockiert hat. Diese Angaben ergänzen invoker, das beschreibt, wie das Skript aufgerufen wurde (z. B. BUTTON#save.onclick). Das ist besonders nützlich für Real-User-Monitoring (RUM), wenn Sie Probleme bei der Kennzahl INP (Interaction to Next Paint) untersuchen.
Ist der Funktionsname unbekannt, etwa bei anonymen Funktionen, bei Top-Level-Skriptausführung (invokerType = "classic-script") oder bei Skripten mit eingeschränkten Angaben, enthält die Eigenschaft einen leeren String "".
Rückgabewert
"handleClick". Ist der Name nicht verfügbar, wird ein leerer String "" zurückgegeben.Beispiele
Verursachende Funktionen langer Frames protokollieren
const observer = new PerformanceObserver((list) => {
for (const frame of list.getEntries()) {
for (const script of frame.scripts) {
console.log(
`${script.sourceFunctionName || '(anonym)'} in ${script.sourceURL}:${script.sourceCharPosition}`,
`– ${Math.round(script.duration)} ms`
);
}
}
});
observer.observe({ type: 'long-animation-frame', buffered: true });Laufzeit pro Funktion für RUM zusammenfassen
const perFunction = new Map();
new PerformanceObserver((list) => {
for (const frame of list.getEntries()) {
for (const { sourceFunctionName, sourceURL, duration } of frame.scripts) {
const key = `${sourceFunctionName || '(anonym)'}@${sourceURL || '(inline)'}`;
perFunction.set(key, (perFunction.get(key) ?? 0) + duration);
}
}
}).observe({ type: 'long-animation-frame', buffered: true });
// Beim Verlassen der Seite die Top 5 senden
addEventListener('visibilitychange', () => {
if (document.visibilityState !== 'hidden') return;
const top = [...perFunction].sort((a, b) => b[1] - a[1]).slice(0, 5);
navigator.sendBeacon('/rum/loaf', JSON.stringify(top));
});Mit Feature-Erkennung absichern
const supported = PerformanceObserver.supportedEntryTypes?.includes('long-animation-frame');
if (supported) {
new PerformanceObserver((list) => {
const slow = list.getEntries()
.flatMap((f) => f.scripts)
.filter((s) => s.invokerType === 'event-listener' && s.sourceFunctionName);
slow.forEach((s) => console.warn(`Langsamer Handler: ${s.sourceFunctionName} (${s.invoker})`));
}).observe({ type: 'long-animation-frame' });
} else {
console.info('Long Animation Frames API nicht verfügbar');
}// Wichtig · Fallstricke
- Kompatibilität: Die Eigenschaft ist Teil der Long Animation Frames API und nur in Chromium-basierten Browsern verfügbar (ab Chrome/Edge 123). Firefox und Safari unterstützen sie nicht. Prüfen Sie die Unterstützung vorher mit
PerformanceObserver.supportedEntryTypes. - Minifizierung: In Produktions-Bundles stehen hier oft verkürzte Namen wie
"a"oder"Xe". Um den ursprünglichen Namen zu ermitteln, brauchen Sie Source Maps zusammen mitsourceURLundsourceCharPosition. - Leerer String: Anonyme Funktionen, Pfeilfunktionen ohne Namensbindung und die Ausführung auf oberster Skriptebene liefern
"". Berücksichtigen Sie diesen Fall immer. - Einstiegspunkt, nicht Hotspot: Angegeben wird nur die aufgerufene Einstiegsfunktion, nicht die Funktion, die tatsächlich am meisten Rechenzeit verbraucht hat. Für eine detaillierte Analyse eignet sich der Profiler der DevTools.
- Datenschutz/Cross-Origin: Skripte fremder Herkunft werden nur mit Einschränkungen gemeldet. Welche Angaben zur Quelle verfügbar sind, hängt von CORS ab.
- Nur Skripte mit mehr als 5 ms Laufzeit erscheinen in
scripts.