Signatur
Beschreibung
Die Eigenschaft containerId gehört zur Schnittstelle TaskAttributionTiming aus der Long Tasks API. Ein solches Objekt steht im Array attribution jedes PerformanceLongTaskTiming-Eintrags. Es gibt an, wo ein langer Task (länger als 50 ms) wahrscheinlich entstanden ist.
containerId enthält den Wert des id-Attributs des Container-Elements, also eines <iframe>-, <embed>- oder <object>-Elements, dem der Task zugeordnet wird. Hat der Container kein id-Attribut oder stammt der Task aus dem Fenster der obersten Ebene (containerType === "window"), ist der Wert ein leerer String.
Nützlich ist die Eigenschaft vor allem beim Performance-Monitoring (RUM): Wenn eingebettete Drittanbieter-Inhalte wie Werbung, Chat-Widgets oder Videoplayer den Hauptthread blockieren, lässt sich mit containerId zusammen mit containerSrc, containerName und containerType das verantwortliche Element genau bestimmen. Deshalb lohnt es sich, eingebetteten Frames eindeutige IDs zu geben.
Rückgabewert
id-Attribut des Containers, dem der lange Task zugeordnet wird, oder ein leerer String (""), wenn es keine ID gibt oder der Task nicht aus einem eingebetteten Container stammt.Beispiele
Lange Tasks beobachten und Container-ID ausgeben
// Lange Tasks (> 50 ms) beobachten
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
for (const attribution of entry.attribution) {
console.log(
`Long Task: ${Math.round(entry.duration)} ms`,
`| Typ: ${attribution.containerType}`,
`| ID: "${attribution.containerId}"`
);
}
}
});
observer.observe({ type: 'longtask', buffered: true });Blockierende iframes per ID dem DOM-Element zuordnen
// HTML: <iframe id="chat-widget" src="https://chat.example.com/embed"></iframe>
const blockingTime = new Map();
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
const [attr] = entry.attribution;
if (!attr?.containerId) continue; // Ohne ID keine eindeutige Zuordnung
const total = (blockingTime.get(attr.containerId) ?? 0) + entry.duration;
blockingTime.set(attr.containerId, total);
const el = document.getElementById(attr.containerId);
if (el && total > 200) {
console.warn(`#${attr.containerId} blockiert seit ${Math.round(total)} ms`, el);
}
}
});
if (PerformanceObserver.supportedEntryTypes?.includes('longtask')) {
observer.observe({ type: 'longtask', buffered: true });
}Attributionsdaten an ein Monitoring-Backend senden
const observer = new PerformanceObserver((list) => {
const payload = list.getEntries().map((entry) => ({
start: Math.round(entry.startTime),
duration: Math.round(entry.duration),
containers: entry.attribution.map((a) => ({
type: a.containerType,
id: a.containerId || null,
name: a.containerName || null,
src: a.containerSrc || null
}))
}));
navigator.sendBeacon('/rum/longtasks', JSON.stringify(payload));
});
observer.observe({ type: 'longtask', buffered: true });// Wichtig · Fallstricke
- Experimentell und eingeschränkt unterstützt: Die Long Tasks API und damit
TaskAttributionTiminggibt es nur in Chromium-basierten Browsern. Prüfe die Unterstützung vorher mitPerformanceObserver.supportedEntryTypes.includes('longtask'). - Oft leer: Bei Tasks im eigenen Dokument (
containerType: "window") und bei Containern ohneidist der Wert"". Ziehe danncontainerSrcodercontainerNameheran. - Nur grobe Zuordnung: Die Zuordnung zeigt auf den Frame, nicht auf ein konkretes Skript oder eine Funktion. Aus Sicherheitsgründen (Same-Origin-Policy) werden bei ursprungsübergreifenden Frames keine Details über deren Inhalt verraten. Für genauere Skript-Zuordnung eignet sich die neuere Long Animation Frames API (
long-animation-frame). - Die ID ist nur so eindeutig wie dein Markup. Doppelte IDs führen zu mehrdeutigen Ergebnissen.
- Die Eigenschaft ist schreibgeschützt. Zuweisungen werden stillschweigend ignoriert.