Signatur
Beschreibung
Die schreibgeschützte Eigenschaft attribution eines PerformanceLongTaskTiming-Eintrags enthält ein Array von TaskAttributionTiming-Objekten. Mit ihnen lässt sich eingrenzen, woher eine lange Aufgabe (eine Aufgabe, die den Hauptthread 50 ms oder länger blockiert) stammt.
Jedes TaskAttributionTiming-Objekt beschreibt den Container, in dem die Arbeit stattfand: containerType (z. B. "iframe", "embed", "object" oder "window"), containerSrc, containerId und containerName. Der Eintrag selbst hat stets name = "unknown" und entryType = "taskattribution".
Die Zuordnung ist bewusst grob: Sie verrät nicht, welche Funktion oder welches Skript die Verzögerung verursacht hat, sondern nur den Rahmen, in dem sie lief. Genauere Informationen (Skript-URL, Quellfunktion) liefert die neuere Long Animation Frames API. Nützlich ist attribution vor allem, um Drittanbieter-iframes (Werbung, Widgets) als Ursache für Rucklern zu identifizieren.
Man greift auf die Eigenschaft praktisch immer innerhalb eines PerformanceObserver-Callbacks mit dem Eintragstyp "longtask" zu.
Rückgabewert
TaskAttributionTiming-Objekten. In aktuellen Implementierungen enthält es in der Regel genau einen Eintrag.Beispiele
Lange Aufgaben mit Ursprung protokollieren
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
const [attr] = entry.attribution;
console.log(
`Long Task: ${entry.duration.toFixed(0)} ms`,
`| Kontext: ${entry.name}`,
`| Container: ${attr?.containerType}`
);
}
});
observer.observe({ type: 'longtask', buffered: true });Drittanbieter-iframes als Verursacher erkennen
const verursacher = new Map();
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
for (const attr of entry.attribution) {
if (attr.containerType !== 'iframe') continue;
const key = attr.containerSrc || attr.containerId || '(unbekannt)';
verursacher.set(key, (verursacher.get(key) ?? 0) + entry.duration);
}
}
}).observe({ type: 'longtask', buffered: true });
// Später auswerten, z. B. beim Verlassen der Seite
addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
console.table([...verursacher].map(([src, ms]) => ({ src, ms: Math.round(ms) })));
}
});Attributionsdaten an ein Monitoring senden
if (PerformanceObserver.supportedEntryTypes?.includes('longtask')) {
new PerformanceObserver((list) => {
const daten = list.getEntries().map((entry) => ({
start: Math.round(entry.startTime),
dauer: Math.round(entry.duration),
kontext: entry.name,
attribution: entry.attribution.map((a) => a.toJSON())
}));
navigator.sendBeacon('/rum/longtasks', JSON.stringify(daten));
}).observe({ type: 'longtask' });
} else {
console.info('Long Tasks API wird nicht unterstützt.');
}// Wichtig · Fallstricke
- Browser-Kompatibilität: Die Long Tasks API gibt es nur in Chromium-basierten Browsern. Firefox und Safari liefern keine
longtask-Einträge – vorher mitPerformanceObserver.supportedEntryTypesprüfen. - Grobe Zuordnung:
attributionnennt nur den Container, nicht das Skript oder die Funktion. Bei Arbeit im eigenen Dokument steht dort meist nurcontainerType: "window"mit leeren Feldern. - Datenschutz/Same-Origin: Bei fremden (cross-origin) Frames bleiben Details bewusst eingeschränkt;
containerSrc,containerIdundcontainerNamebeziehen sich auf das iframe-Element im eigenen Dokument, nicht auf dessen Inhalt. - Das Array ist eingefroren; Änderungen daran werfen im Strict Mode einen
TypeError. - Für genauere Ursachenanalyse die
long-animation-frame-Einträge (PerformanceLongAnimationFrameTiming.scripts) nutzen, sofern verfügbar.