PerformanceEventTiming: interactionId-Eigenschaft
Baseline 2025
Neu verfügbar
Seit Dezember 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Die schreibgeschützte Eigenschaft interactionId der Schnittstelle PerformanceEventTiming gibt eine ID zurück, die eine Benutzerinteraktion eindeutig identifiziert, welche eine Reihe zugehöriger Ereignisse ausgelöst hat.
Wert
Eine Zahl. Bei Ereignistypen, für die keine Interaktions-ID berechnet wird, ist der Wert 0.
Beschreibung
Wenn eine Person mit einer Webseite interagiert, löst eine Benutzerinteraktion (beispielsweise ein Klick) üblicherweise eine Folge von Ereignissen aus, etwa pointerdown-, pointerup- und click-Ereignisse. Um die Latenz dieser Ereignisfolge zu messen, haben die Ereignisse dieselbe interactionId.
Eine interactionId wird nur für die folgenden Ereignistypen berechnet, die zu einer Benutzerinteraktion gehören. Andernfalls ist sie 0.
| Ereignistypen | Benutzerinteraktion |
|---|---|
pointerdown, pointerup, click |
Klicken / Tippen / Ziehen |
contextmenu |
Kontextmenü |
input |
Eingabe mit einem Eingabemethoden-Editor (IME) |
keydown, keyup |
Tastendruck |
Die interactionId wird auch benötigt, um die Metrik Interaction to next paint zu berechnen. Diese hilft dabei, die Reaktionsfähigkeit auf Benutzerinteraktionen über die gesamte Lebensdauer einer Seite zu analysieren.
Beispiele
interactionId verwenden
Das folgende Beispiel gruppiert die Dauer beobachteter Ereignisse nach Interaktions-ID. Standardmäßig werden nur Ereignisse mit einer Dauer von mindestens 104 Millisekunden erfasst. Die Map eventLatencies kann anschließend beispielsweise verwendet werden, um die Ereignisse mit der längsten Dauer innerhalb einer Benutzerinteraktion zu finden.
// The key is the interaction ID.
const eventLatencies = new Map();
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
if (entry.interactionId > 0) {
const interactionId = entry.interactionId;
if (!eventLatencies.has(interactionId)) {
eventLatencies.set(interactionId, []);
}
eventLatencies.get(interactionId).push(entry.duration);
}
});
// Log the maximum observed event duration for each interaction.
eventLatencies.forEach((durations, interactionId) => {
console.log(interactionId, Math.max(...durations));
});
});
observer.observe({ type: "event", buffered: true });
Spezifikationen
| Spezifikation |
|---|
| Event Timing API # dom-performanceeventtiming-interactionid |