Signatur
Beschreibung
Die schreibgeschützte Eigenschaft pauseDuration eines PerformanceScriptTiming-Eintrags liefert einen DOMHighResTimeStamp. Er gibt an, wie viele Millisekunden ein Skript insgesamt mit synchronen, den Hauptthread anhaltenden Operationen verbracht hat. Typische Auslöser sind window.alert(), window.confirm(), window.prompt() und synchrone XMLHttpRequest-Aufrufe.
PerformanceScriptTiming-Einträge gehören zur Long Animation Frames API (LoAF). Man erhält sie nicht direkt über einen eigenen Eintragstyp, sondern über die Eigenschaft scripts eines PerformanceLongAnimationFrameTiming-Eintrags. Diese Einträge beobachtet man mit einem PerformanceObserver vom Typ "long-animation-frame".
Der Wert zeigt, ob ein langsamer Frame von echter Rechenarbeit kommt oder davon, dass ein Skript auf eine blockierende Nutzerinteraktion bzw. Netzwerkantwort gewartet hat. Zieht man pauseDuration (und forcedStyleAndLayoutDuration) von der duration des Skripts ab, bleibt ungefähr die reine Ausführungszeit übrig.
Rückgabewert
0.Beispiele
Pausenzeit aller Skripte in langen Frames protokollieren
const observer = new PerformanceObserver((list) => {
for (const frame of list.getEntries()) {
for (const script of frame.scripts) {
if (script.pauseDuration > 0) {
console.log(
`${script.sourceURL || script.invoker}: ${script.pauseDuration.toFixed(1)} ms pausiert`
);
}
}
}
});
observer.observe({ type: 'long-animation-frame', buffered: true });
// Löst eine blockierende Pause aus
button.addEventListener('click', () => alert('Gespeichert!'));Reine Ausführungszeit ohne Pausen berechnen
const analyse = (script) => {
const netto = script.duration
- script.pauseDuration
- script.forcedStyleAndLayoutDuration;
return {
quelle: script.sourceFunctionName || script.invoker,
gesamt: Math.round(script.duration),
pause: Math.round(script.pauseDuration),
netto: Math.round(netto)
};
};
new PerformanceObserver((list) => {
const daten = list.getEntries().flatMap((f) => f.scripts.map(analyse));
console.table(daten);
}).observe({ type: 'long-animation-frame', buffered: true });Pausen per Feature-Erkennung an ein RUM-Backend melden
if (PerformanceObserver.supportedEntryTypes?.includes('long-animation-frame')) {
new PerformanceObserver((list) => {
const pausen = list.getEntries()
.flatMap((f) => f.scripts)
.filter((s) => s.pauseDuration > 50)
.map((s) => ({ url: s.sourceURL, pauseMs: Math.round(s.pauseDuration) }));
if (pausen.length) {
navigator.sendBeacon('/rum/pausen', JSON.stringify(pausen));
}
}).observe({ type: 'long-animation-frame', buffered: true });
} else {
console.info('Long Animation Frames API wird nicht unterstützt.');
}// Wichtig · Fallstricke
- Kompatibilität: Die Long Animation Frames API gibt es bisher nur in Chromium-basierten Browsern (Chrome/Edge ab 123). Firefox und Safari unterstützen sie nicht. Prüfe die Unterstützung vorab mit
PerformanceObserver.supportedEntryTypes. - Skripte erscheinen nur in
scripts, wenn der Frame als „lang“ gilt (über 50 ms) und das einzelne Skript mindestens etwa 5 ms gedauert hat. Kurze Pausen tauchen deshalb oft gar nicht auf. - Ein hoher Wert deutet meist auf
alert()/confirm()/prompt()oder synchrones XHR hin. Die Wartezeit hängt davon ab, wie schnell Nutzer reagieren, und sagt wenig über die Leistung des Codes selbst aus. Besser sind nicht-blockierende Dialoge (<dialog>) und asynchronesfetch(). - Bei Cross-Origin-Skripten ohne passende CORS-Freigabe können Angaben wie
sourceURLeingeschränkt sein. Das kann die Zuordnung der Pausenzeit erschweren.