Signatur
Beschreibung
Die nur lesbare Eigenschaft containerSrc gehört zur Schnittstelle TaskAttributionTiming aus der Long Tasks API. Ein solches Objekt erhältst du nicht direkt, sondern über das Array attribution eines PerformanceLongTaskTiming-Eintrags. Dieser wird erzeugt, wenn der Haupt-Thread länger als 50 ms am Stück blockiert war.
containerSrc gibt an, woher der Inhalt des Containers stammt, der die Aufgabe verursacht hat. Gemeint ist der Wert des src-Attributs des <iframe>-, <embed>- oder <object>-Elements. Wird die Aufgabe dem Fenster der obersten Ebene zugeordnet (containerType === "window") oder ist kein src gesetzt, ist der Wert ein leerer String.
Sinnvoll ist das vor allem beim Performance-Monitoring (RUM). Damit findest du heraus, ob eingebettete Drittanbieter-Inhalte wie Werbung, Video-Player oder Social-Widgets den Haupt-Thread blockieren. Zusammen mit containerType, containerId und containerName kannst du das verursachende Element genauer bestimmen.
Rückgabewert
src-Attributs des Containers, dem die lange Aufgabe zugeordnet wird. Ein leerer String "", wenn es keinen passenden Container gibt oder kein src gesetzt ist.Beispiele
Lange Aufgaben beobachten und Container-Quelle ausgeben
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}`,
`Quelle: ${attr.containerSrc || '(keine)'}`
);
}
}
});
observer.observe({ type: 'longtask', buffered: true });Blockierende Drittanbieter-iframes nach Quelle zusammenfassen
const blockingBySrc = new Map();
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
for (const { containerType, containerSrc } of entry.attribution) {
if (containerType !== 'iframe' || !containerSrc) continue;
const host = new URL(containerSrc, location.href).host;
blockingBySrc.set(host, (blockingBySrc.get(host) ?? 0) + entry.duration);
}
}
}).observe({ type: 'longtask', buffered: true });
// Beim Verlassen der Seite an das Monitoring schicken
addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden' && blockingBySrc.size) {
navigator.sendBeacon('/rum/longtasks', JSON.stringify(Object.fromEntries(blockingBySrc)));
}
});Feature-Erkennung vor der Nutzung
const supportsLongTasks =
typeof PerformanceObserver !== 'undefined' &&
PerformanceObserver.supportedEntryTypes?.includes('longtask');
if (supportsLongTasks && 'TaskAttributionTiming' in window) {
console.log('containerSrc verfügbar:',
'containerSrc' in TaskAttributionTiming.prototype);
} else {
console.log('Long Tasks API wird nicht unterstützt');
}// Wichtig · Fallstricke
- Experimentell und nur in Chromium: Firefox und Safari unterstützen die Long Tasks API nicht. Prüfe deshalb immer vorher mit
PerformanceObserver.supportedEntryTypes, ob sie verfügbar ist. - Grobe Zuordnung: In der Praxis liefert Chrome oft
containerType: "window"und einen leerencontainerSrc, auch wenn ein iframe beteiligt war. Sieh die Zuordnung als Hinweis, nicht als exakte Ursachenanalyse. Wenn du Skripte genau zuordnen willst, ist die neuere Long Animation Frames API (long-animation-frame) mitscripts[].sourceURLmeist besser geeignet. - Wert zum Zeitpunkt der Aufgabe: Gemeldet wird das
src-Attribut, nicht zwingend die aktuelle URL des Dokuments im iframe. Nach einer Navigation im iframe können beide voneinander abweichen. - Datenschutz:
containerSrckann vollständige URLs mit Abfrageparametern enthalten, zum Beispiel Tracking-IDs. Kürze sie vor dem Senden an dein Monitoring am besten auf den Host. - Die Eigenschaft ist nur lesbar. Zuweisungen werden stillschweigend ignoriert, im Strict Mode lösen sie einen
TypeErroraus.