Signatur
Beschreibung
containerName gehört zur Long Tasks API. Wenn der Browser eine lange Aufgabe meldet, also einen Block im Hauptthread, der länger als 50 ms dauert, enthält der zugehörige PerformanceLongTaskTiming-Eintrag im Array attribution ein oder mehrere TaskAttributionTiming-Objekte. Sie zeigen, wo die Arbeit angefallen ist. containerName liefert dabei den Wert des name-Attributs des betroffenen Containers.
Als Container zählen <iframe>, <embed> und <object>. Um welche Art es sich handelt, verrät containerType. Die Eigenschaft ist vor allem nützlich, wenn eine Seite mehrere eingebettete Frames von Drittanbietern enthält, etwa Werbung, Chat-Widgets oder Videoplayer. Mit einem sprechenden name an jedem Frame lässt sich im Real User Monitoring (RUM) schnell erkennen, welches Einbettungselement den Hauptthread blockiert.
Hat der Container kein name-Attribut oder stammt die Aufgabe aus dem Fenster selbst (containerType === "window"), ist der Wert ein leerer String. Zur genaueren Bestimmung sollte man containerName deshalb immer zusammen mit containerId und containerSrc auswerten.
Rückgabewert
name-Attributs des Containers. Fehlt das Attribut oder gibt es keinen Container, ist es ein leerer String "".Beispiele
Container-Namen langer Aufgaben protokollieren
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
for (const attr of entry.attribution) {
console.log(
`Lange Aufgabe (${Math.round(entry.duration)} ms)`,
`Typ: ${attr.containerType}`,
`Name: "${attr.containerName}"`
);
}
}
});
observer.observe({ type: 'longtask', buffered: true });Blockierzeit pro benanntem iframe summieren (RUM)
// HTML: <iframe name="chat-widget" src="https://chat.example.com"></iframe>
const blockierzeit = new Map();
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
const [attr] = entry.attribution;
// Fallback, falls kein name-Attribut gesetzt ist
const key = attr?.containerName || attr?.containerSrc || '(Hauptdokument)';
blockierzeit.set(key, (blockierzeit.get(key) ?? 0) + entry.duration);
}
});
observer.observe({ type: 'longtask', buffered: true });
// Beim Verlassen der Seite an den Analyse-Server senden
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
navigator.sendBeacon('/rum/longtasks', JSON.stringify(Object.fromEntries(blockierzeit)));
}
});Unterstützung vor der Nutzung prüfen
const unterstuetzt =
typeof PerformanceObserver !== 'undefined' &&
PerformanceObserver.supportedEntryTypes?.includes('longtask') &&
typeof TaskAttributionTiming !== 'undefined' &&
'containerName' in TaskAttributionTiming.prototype;
console.log(unterstuetzt ? 'containerName verfügbar' : 'Long Tasks API nicht unterstützt');// Wichtig · Fallstricke
- Experimentell und nur in Chromium verfügbar: Firefox und Safari kennen weder
longtask-Einträge nochTaskAttributionTiming. Deshalb vorher immer mitPerformanceObserver.supportedEntryTypesprüfen, ob die API unterstützt wird. - Häufig leer: Bei Aufgaben aus dem eigenen Dokument (
containerTypeist"window") und bei Frames ohnename-Attribut ist der Wert"". Für eine aussagekräftige Auswertung sollte jedes eingebettete Frame ein eindeutigesname-Attribut erhalten. - Grobe Zuordnung: Die Attribution nennt nur den Container, nicht das verursachende Skript. Für Details auf Skriptebene gibt es in neueren Chromium-Versionen die Long Animation Frames API (
long-animation-frame). - Datenschutz: Bei Frames von fremden Ursprüngen (cross-origin) gibt der Browser absichtlich nur wenige Informationen preis.
containerNameist das Attribut, das im eigenen Dokument steht. Es verrät also nichts über den Inhalt des Frames. - Die Eigenschaft ist schreibgeschützt. Zuweisungen werden ignoriert, im Strict Mode lösen sie einen
TypeErroraus.