DasPerformanceEventTiming-Interface der Event Timing API bietet Einblicke in die Latenz bestimmter Ereignistypen, die durch Benutzerinteraktionen ausgelöst werden.

Beschreibung

Diese API ermöglicht die Sichtbarkeit langsamer Ereignisse, indem sie Ereigniszeitstempel und Dauer für bestimmte Ereignistypen bereitstellt (siehe unten). Beispielsweise können Sie die Zeit zwischen einer Benutzeraktion und dem Start des zugehörigen Ereignishandlers oder die Zeit messen, die ein Ereignishandler benötigt, um auszuführen.

Diese API ist besonders nützlich zur Messung derInteraction to Next Paint (INP): der längsten Zeit (abzüglich einiger Ausreißer) von dem Punkt, an dem ein Benutzer mit Ihrer App interagiert, bis zu dem Punkt, an dem der Browser tatsächlich in der Lage war, auf diese Interaktion zu reagieren.

In der Regel arbeiten Sie mitPerformanceEventTiming-Objekten, indem Sie einePerformanceObserver-Instanz erstellen und dann ihreobserve()-Methode aufrufen, wobei Sie"event" oder"first-input" als Wert dertype-Option übergeben. Der Callback desPerformanceObserver-Objekts wird dann mit einer Liste vonPerformanceEventTiming-Objekten aufgerufen, die Sie analysieren können. Siehe dasBeispiel unten für mehr.

Standardmäßig werdenPerformanceEventTiming-Einträge angezeigt, wenn ihreduration 104 ms oder länger ist. Forschungen legen nahe, dass Benutzereingaben, die nicht innerhalb von 100 ms behandelt werden, als langsam gelten und 104 ms das erste Vielfache von 8 ist, das größer als 100 ms ist (aus Sicherheitsgründen wird diese API auf das nächste Vielfache von 8 ms gerundet). Sie können jedoch denPerformanceObserver auf einen anderen Schwellenwert einstellen, indem Sie diedurationThreshold-Option in derobserve()-Methode verwenden.

Dieses Interface erbt Methoden und Eigenschaften von seinem Elternteil,PerformanceEntry:

Offengelegte Ereignisse

Die folgenden Ereignistypen werden von der Event Timing API offengelegt:

Beachten Sie, dass die folgenden Ereignisse nicht in der Liste enthalten sind, da sie kontinuierliche Ereignisse sind und derzeit keine sinnvollen Ereigniszählungen oder Leistungsmetriken abgeleitet werden können:mousemove,pointermove,pointerrawupdate,touchmove,wheel,drag.

Um eine Liste aller offengelegten Ereignisse zu erhalten, können Sie auch Schlüssel imperformance.eventCounts-Verzeichnis nachschlagen:

const exposedEventsList = [...performance.eventCounts.keys()];

Konstruktor

Dieses Interface hat keinen eigenen Konstruktor. Siehe dasBeispiel unten, um zu erfahren, wie Sie typischerweise die Informationen erhalten, die dasPerformanceEventTiming-Interface enthält.

Instanzeigenschaften

Dieses Interface erweitert die folgenden Eigenschaften vonPerformanceEntry für Ereignis-Timing-Leistungseinträge, indem es sie wie folgt qualifiziert:

PerformanceEntry.durationSchreibgeschützt

Gibt einenDOMHighResTimeStamp zurück, der die Zeit vomstartTime bis zum nächsten Rendering-Paint (auf den nächsten 8ms gerundet) darstellt.

PerformanceEntry.entryTypeSchreibgeschützt

Gibt"event" (für lange Ereignisse) oder"first-input" (für die erste Benutzerinteraktion) zurück.

PerformanceEntry.nameSchreibgeschützt

Gibt den Typ des zugehörigen Ereignisses zurück.

PerformanceEntry.startTimeSchreibgeschützt

Gibt einenDOMHighResTimeStamp zurück, der dietimestamp-Eigenschaft des zugehörigen Ereignisses darstellt. Dies ist die Zeit, zu der das Ereignis erstellt wurde, und kann als Stellvertreter für die Zeit angesehen werden, zu der die Benutzerinteraktion stattgefunden hat.

Dieses Interface unterstützt auch die folgenden Eigenschaften:

PerformanceEventTiming.cancelableSchreibgeschützt

Gibt diecancelable-Eigenschaft des zugehörigen Ereignisses zurück.

PerformanceEventTiming.interactionIdSchreibgeschützt

Gibt die ID zurück, die die Benutzerinteraktion, die das zugehörige Ereignis ausgelöst hat, eindeutig identifiziert.

PerformanceEventTiming.processingStartSchreibgeschützt

Gibt einenDOMHighResTimeStamp zurück, der die Zeit darstellt, zu der das Ereignisdispatch begonnen hat. Um die Zeit zwischen einer Benutzeraktion und dem Beginn des Ereignishandlers zu messen, berechnen SieprocessingStart-startTime.

PerformanceEventTiming.processingEndSchreibgeschützt

Gibt einenDOMHighResTimeStamp zurück, der die Zeit darstellt, zu der das Ereignisdispatch endete. Um die Zeit zu messen, die der Ereignishandler benötigte, um auszuführen, berechnen SieprocessingEnd-processingStart.

PerformanceEventTiming.targetSchreibgeschützt

Gibt das letzte Ziel des zugehörigen Ereignisses zurück, sofern es nicht entfernt wurde.

Instanzmethoden

PerformanceEventTiming.toJSON()

Gibt eine JSON-Darstellung desPerformanceEventTiming-Objekts zurück.

Beispiele

Erfassen von Ereignis-Timing-Informationen

Um Ereignis-Timing-Informationen zu erhalten, erstellen Sie einePerformanceObserver-Instanz und rufen dann dieobserve()-Methode auf, wobei Sie"event" oder"first-input" als Wert dertype-Option übergeben. Sie müssenbuffered auftrue setzen, um Zugriff auf Ereignisse zu erhalten, die der Benutzer-Agent beim Erstellen des Dokuments gepuffert hat. Der Callback desPerformanceObserver-Objekts wird dann mit einer Liste vonPerformanceEventTiming-Objekten aufgerufen, die Sie analysieren können.

const observer = new PerformanceObserver((list) => {  list.getEntries().forEach((entry) => {    // Full duration    const duration = entry.duration;    // Input delay (before processing event)    const delay = entry.processingStart - entry.startTime;    // Synchronous event processing time    // (between start and end dispatch)    const eventHandlerTime = entry.processingEnd - entry.processingStart;    console.log(`Total duration: ${duration}`);    console.log(`Event delay: ${delay}`);    console.log(`Event handler duration: ${eventHandlerTime}`);  });});// Register the observer for eventsobserver.observe({ type: "event", buffered: true });

Sie können auch einen anderendurationThreshold einstellen. Der Standardwert ist 104 ms und der minimal mögliche Dauerschwellenwert ist 16 ms.

observer.observe({ type: "event", durationThreshold: 16, buffered: true });

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Intersection Observer API
• Page Visibility API