Signatur
Beschreibung
Die Eigenschaft containerType gehört zur Schnittstelle TaskAttributionTiming der Long Tasks API. Meldet der Browser über einen PerformanceObserver einen Eintrag vom Typ "longtask" (eine Aufgabe, die den Hauptthread mindestens 50 ms blockiert), enthält dessen Array attribution ein oder mehrere TaskAttributionTiming-Objekte. containerType gibt dort an, in welcher Art von Container die verursachende Arbeit stattgefunden hat.
Mögliche Werte sind "iframe", "embed" und "object", wenn die Aufgabe einem eingebetteten Browsing-Kontext zugeordnet wird. Laut Spezifikation steht "window" für das oberste Dokument selbst. In diesem Fall sind containerName, containerId und containerSrc meist leere Zeichenketten.
Nützlich ist die Eigenschaft vor allem beim Performance-Monitoring (Real User Monitoring): Sie hilft einzuschätzen, ob Ruckler durch eigenen Code oder durch eingebettete Fremdinhalte wie Werbe-iframes, Video-Player oder Widgets verursacht werden. Zusammen mit containerSrc und containerId lässt sich der verursachende Container meist genau bestimmen.
Rückgabewert
"iframe", "embed", "object" oder "window". Die Eigenschaft ist schreibgeschützt.Beispiele
Containertyp langer Aufgaben protokollieren
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
for (const attr of entry.attribution) {
console.log(
`Long Task ${Math.round(entry.duration)} ms – Container: ${attr.containerType}`
);
}
}
});
observer.observe({ type: 'longtask', buffered: true });Eingebettete Fremdinhalte als Verursacher erkennen
const embedTypes = new Set(['iframe', 'embed', 'object']);
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
const [attr] = entry.attribution;
if (attr && embedTypes.has(attr.containerType)) {
console.warn('Eingebetteter Inhalt blockiert den Hauptthread:', {
typ: attr.containerType,
quelle: attr.containerSrc || '(unbekannt)',
id: attr.containerId || '(keine)',
dauer: Math.round(entry.duration)
});
}
}
}).observe({ type: 'longtask', buffered: true });Statistik nach Containertyp an einen Analyse-Endpunkt senden
if (PerformanceObserver.supportedEntryTypes?.includes('longtask')) {
const stats = {};
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
for (const { containerType } of entry.attribution) {
const key = containerType || 'unbekannt';
stats[key] = (stats[key] ?? 0) + entry.duration;
}
}
}).observe({ type: 'longtask', buffered: true });
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
navigator.sendBeacon('/rum/longtasks', JSON.stringify(stats));
}
});
} else {
console.info('Long Tasks API wird nicht unterstützt.');
}// Wichtig · Fallstricke
- Experimentell und nur in Chromium verfügbar: Firefox und Safari unterstützen die Long Tasks API nicht. Vor der Nutzung sollte man mit
PerformanceObserver.supportedEntryTypes.includes('longtask')prüfen, ob sie vorhanden ist. - In der Praxis liefert Chrome häufig
"window"mit leeren Container-Feldern. Das ist auch dann so, wenn die Ursache aus einem Skript stammt, denn die Zuordnung erfolgt nur auf Ebene des Frames und nicht auf Ebene des Skripts. Für eine Zuordnung pro Skript eignet sich die neuere Long Animation Frames API ("long-animation-frame") besser. - Bei Frames von anderen Ursprüngen (cross-origin) werden Details aus Datenschutzgründen eingeschränkt.
containerTypeist dann zwar gesetzt,containerSrcodercontainerNamekönnen aber leer sein. - Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird still ignoriert und löst im Strict Mode keinen Fehler aus, weil es sich um einen Getter am Prototyp handelt.
- Werte immer als Zeichenkette vergleichen (
=== 'iframe') und mit unbekannten Werten rechnen, da sich die Spezifikation noch ändern kann.