Signatur
Beschreibung
Die schreibgeschützte Eigenschaft window eines PerformanceScriptTiming-Eintrags gibt das Window-Objekt des Containers zurück, in dem das gemessene Skript lief. Das kann das Hauptdokument sein oder ein eingebettetes <iframe>. Die Einträge gehören zur Long Animation Frames API (LoAF). Man erhält sie über das Array scripts eines PerformanceLongAnimationFrameTiming-Eintrags.
Die Eigenschaft hilft, wenn man eine Seite mit mehreren Frames analysiert. Zusammen mit windowAttribution ("self", "descendant", "ancestor", "same-page", "other") lässt sich feststellen, welches Fenster einen Frame blockiert hat. So kann man zum Beispiel ein Werbe- oder Widget-iframe als Ursache für ruckelnde Interaktionen erkennen. Über script.window.frameElement kommt man bei gleicher Herkunft (Same-Origin) sogar an das zugehörige <iframe>-Element.
Ist das Fenster nicht erreichbar, gibt die Eigenschaft null zurück. Das passiert zum Beispiel bei einem Fenster anderer Herkunft (Cross-Origin) oder wenn das Fenster inzwischen geschlossen oder entfernt wurde. Prüfe den Wert deshalb vor jeder Nutzung.
Rückgabewert
Window-Objekt des Containers, in dem das Skript ausgeführt wurde, oder null, wenn es nicht verfügbar ist (z. B. Cross-Origin oder bereits entfernt).Beispiele
Prüfen, ob ein langsames Skript im eigenen Fenster lief
const observer = new PerformanceObserver((list) => {
for (const frame of list.getEntries()) {
for (const script of frame.scripts) {
const eigenesFenster = script.window === window;
console.log(
`${script.invoker} (${Math.round(script.duration)} ms) – eigenes Fenster: ${eigenesFenster}`
);
}
}
});
observer.observe({ type: 'long-animation-frame', buffered: true });Verursachendes iframe identifizieren
const observer = new PerformanceObserver((list) => {
for (const frame of list.getEntries()) {
for (const script of frame.scripts) {
if (script.windowAttribution !== 'descendant') continue;
const win = script.window;
// frameElement ist nur bei gleicher Herkunft zugänglich
const iframe = win?.frameElement ?? null;
console.warn('Blockierendes iframe:', iframe?.id ?? '(unbekannt/Cross-Origin)',
`${Math.round(script.duration)} ms`);
}
}
});
observer.observe({ type: 'long-animation-frame', buffered: true });Skriptzeiten pro Fenster zusammenfassen (mit Feature-Erkennung)
if (PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')) {
const zeitProFenster = new Map();
new PerformanceObserver((list) => {
for (const frame of list.getEntries()) {
for (const script of frame.scripts) {
const key = script.window ?? 'nicht zugänglich';
zeitProFenster.set(key, (zeitProFenster.get(key) ?? 0) + script.duration);
}
}
}).observe({ type: 'long-animation-frame', buffered: true });
setTimeout(() => {
for (const [win, ms] of zeitProFenster) {
const name = win === window ? 'Hauptfenster' : typeof win === 'string' ? win : 'iframe';
console.log(`${name}: ${Math.round(ms)} ms`);
}
}, 10000);
} else {
console.log('Long Animation Frames API wird nicht unterstützt.');
}// Wichtig · Fallstricke
- Kompatibilität: Die Eigenschaft ist experimentell und bisher nur in Chromium-Browsern ab Version 123 verfügbar. Prüfe die Unterstützung vorher mit
PerformanceObserver.supportedEntryTypes.includes('long-animation-frame'). - Kann
nullsein: Bei Fenstern anderer Herkunft (Cross-Origin) oder bereits entfernten iframes gibt es keine Referenz. Nutze deshalb optionale Verkettung (?.) und verwende zusätzlichwindowAttribution. - Same-Origin-Policy: Auch wenn du ein
Windowerhältst, sind viele Eigenschaften (z. B.frameElement,document) nur bei gleicher Herkunft zugänglich. Sonst wird einSecurityErrorgeworfen odernullzurückgegeben. - Speicher: Wenn du Referenzen auf Fenster dauerhaft speicherst (z. B. in einer
Map), können entfernte iframes nicht von der Speicherbereinigung freigegeben werden. Nutze besser eineWeakMapoder speichere nur Kennungen. - Die Eigenschaft ist schreibgeschützt. Zuweisungen haben keine Wirkung.