Signatur
Beschreibung
Die Eigenschaft cancelable eines PerformanceEventTiming-Eintrags spiegelt den Wert von Event.cancelable des ursprünglichen Ereignisses wider, zu dem der Performance-Eintrag gehört. Sie ist true, wenn das Ereignis mit preventDefault() abgebrochen werden konnte, sonst false.
Nützlich ist das bei der Analyse der Reaktionsfähigkeit, etwa für Interaction to Next Paint (INP): Abbrechbare Ereignisse wie touchstart, wheel oder keydown zwingen den Browser, auf den Event-Handler zu warten, bevor er die Standardaktion ausführt (z. B. Scrollen). Lange Verarbeitungszeiten bei abbrechbaren Ereignissen blockieren daher oft direkt die Standardaktion. Mit dieser Eigenschaft kannst du langsame Ereignisse gezielt danach filtern.
Die Einträge bekommst du über einen PerformanceObserver mit dem Typ "event" (Ereignisse ab einer Mindestdauer) oder "first-input" (erste Nutzereingabe). Die Eigenschaft ist schreibgeschützt und nimmt keine Parameter an.
Rückgabewert
true, wenn das zugehörige Ereignis abbrechbar war, andernfalls false.Beispiele
Abbrechbare Ereignisse mit PerformanceObserver protokollieren
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(`${entry.name}: abbrechbar=${entry.cancelable}, Dauer=${entry.duration} ms`);
}
});
// Ereignisse ab 16 ms Dauer erfassen (Minimum laut Spezifikation)
observer.observe({ type: "event", buffered: true, durationThreshold: 16 });Langsame, abbrechbare Ereignisse als Scroll-Bremse erkennen
const slowCancelable = [];
new PerformanceObserver((list) => {
list.getEntries()
.filter((entry) => entry.cancelable && entry.processingEnd - entry.processingStart > 50)
.forEach((entry) => {
slowCancelable.push({
typ: entry.name,
verarbeitung: Math.round(entry.processingEnd - entry.processingStart),
ziel: entry.target?.nodeName ?? "unbekannt"
});
console.warn("Blockierender Handler:", slowCancelable.at(-1));
});
}).observe({ type: "event", buffered: true, durationThreshold: 16 });Erste Eingabe (first-input) prüfen
new PerformanceObserver((list) => {
const [firstInput] = list.getEntries();
const verzoegerung = firstInput.processingStart - firstInput.startTime;
console.log({
ereignis: firstInput.name,
abbrechbar: firstInput.cancelable,
eingabeVerzoegerung: Math.round(verzoegerung)
});
}).observe({ type: "first-input", buffered: true });// Wichtig · Fallstricke
- Browser-Kompatibilität: Die Event Timing API wird von Chromium-Browsern (ab Version 76) und Firefox (ab 89) unterstützt, in Safari erst seit Kurzem. Vorher prüfen, z. B. mit
PerformanceObserver.supportedEntryTypes.includes("event"). - Der Wert sagt nur, ob das Ereignis abbrechbar war, nicht ob
preventDefault()tatsächlich aufgerufen wurde. Dafür gibt es in der Event Timing API keine Information. - Bei Listenern, die mit
{ passive: true }registriert wurden, kann das Ereignis trotzdemcancelable: truehaben. Der Browser wartet dann aber nicht auf den Handler.cancelableallein beweist also noch nicht, dass die Standardaktion blockiert wurde. - Einträge vom Typ
"event"werden erst ab einer Dauer von 104 ms (Standard) bzw. dem angegebenendurationThreshold(mindestens 16 ms) erzeugt. Schnelle Ereignisse tauchen deshalb nicht auf. entry.targetkannnullsein, wenn der Knoten inzwischen aus dem DOM entfernt wurde.