Signatur
Beschreibung
performance.eventCounts gehört zur Event Timing API und liefert ein EventCounts-Objekt. Es verhält sich wie eine schreibgeschützte Map: Die Schlüssel sind Ereignistypen wie "click", "keydown" oder "pointerdown", die Werte sind die Anzahl der Auslösungen seit dem Laden des Dokuments.
Nützlich ist die Eigenschaft vor allem für Performance-Monitoring und Real User Monitoring (RUM). Die Event Timing API meldet über PerformanceObserver nur Ereignisse, deren Dauer eine Schwelle überschreitet (standardmäßig 104 ms). Mit eventCounts erfahren Sie die Gesamtzahl der Interaktionen und können so Anteile berechnen, etwa: „Wie viel Prozent aller Klicks waren langsam?“
Gezählt werden nur Ereignistypen, die die Event Timing API unterstützt. Dazu gehören vor allem Maus-, Pointer-, Touch-, Tastatur-, Eingabe-, Kompositions- und Drag-and-Drop-Ereignisse (z. B. click, dblclick, mousedown, pointerup, touchstart, keydown, input, beforeinput, drop). Ereignisse wie scroll, resize oder load tauchen nicht auf.
Das Objekt hat die üblichen lesenden Map-Methoden: get(), has(), size, keys(), values(), entries(), forEach() und [Symbol.iterator]. Schreibende Methoden wie set(), delete() oder clear() gibt es nicht.
Rückgabewert
[ereignistyp: string, anzahl: number]. Es ist immer dieselbe, laufend aktualisierte Instanz.Beispiele
Anzahl bestimmter Ereignisse abfragen
// Wie oft wurde bisher geklickt bzw. eine Taste gedrückt?
const counts = performance.eventCounts;
console.log(`Klicks: ${counts.get('click') ?? 0}`);
console.log(`Tastendrücke: ${counts.get('keydown') ?? 0}`);
console.log(`Erfasste Typen: ${counts.size}`);Alle Ereignisse mit Zählerstand > 0 auflisten
const nonZero = [...performance.eventCounts]
.filter(([, count]) => count > 0)
.sort((a, b) => b[1] - a[1]);
console.table(Object.fromEntries(nonZero));Anteil langsamer Klicks berechnen (RUM)
let slowClicks = 0;
// Event Timing meldet nur Ereignisse ab durationThreshold (min. 16 ms)
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.name === 'click' && entry.duration > 100) slowClicks++;
}
});
observer.observe({ type: 'event', durationThreshold: 16, buffered: true });
// Beim Verlassen der Seite auswerten und senden
document.addEventListener('visibilitychange', () => {
if (document.visibilityState !== 'hidden') return;
const totalClicks = performance.eventCounts.get('click') ?? 0;
const ratio = totalClicks ? slowClicks / totalClicks : 0;
navigator.sendBeacon('/rum', JSON.stringify({ totalClicks, slowClicks, ratio }));
});Funktionsprüfung vor der Nutzung
const getEventCount = (type) =>
'eventCounts' in performance ? performance.eventCounts.get(type) ?? 0 : null;
console.log(getEventCount('pointerdown'));// Wichtig · Fallstricke
- Browser-Unterstützung: Nur in Chromium-Browsern (ab Version 85) und Firefox (ab 89). Safari unterstützt die Eigenschaft (Stand 2024) nicht, dort ist sie
undefined. Deshalb immer mit'eventCounts' in performanceprüfen. - Nicht jeder Ereignistyp wird gezählt, nur die von der Event Timing API erfassten.
get('scroll')liefertundefined, nicht0. - Gezählt werden die Ereignisse, die der Browser ausliefert, unabhängig davon, ob ein Listener registriert ist. Mit
dispatchEvent()ausgelöste, synthetische Ereignisse zählen nicht mit. - Die Zähler gelten pro Dokument und lassen sich nicht zurücksetzen. Für Zeitfenster merken Sie sich einen Zwischenstand und bilden die Differenz. Bei Seiten aus dem Back/Forward-Cache laufen die Zähler weiter.
- Die Eigenschaft gibt es nur im Fensterkontext, nicht in Web Workers.
- Zu Datenschutz und Performance: Das Auslesen kostet praktisch nichts. Die Werte zeigen aber das Interaktionsverhalten der Nutzer und sollten nur zusammengefasst an Analysedienste gesendet werden.