PerformanceEventTiming

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 der Interaction 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 mit PerformanceEventTiming-Objekten, indem Sie eine PerformanceObserver-Instanz erstellen und dann ihre observe()-Methode aufrufen, wobei Sie "event" oder "first-input" als Wert der type-Option übergeben. Der Callback des PerformanceObserver-Objekts wird dann mit einer Liste von PerformanceEventTiming-Objekten aufgerufen, die Sie analysieren können. Siehe das Beispiel unten für mehr.

Standardmäßig werden PerformanceEventTiming-Einträge angezeigt, wenn ihre duration 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 den PerformanceObserver auf einen anderen Schwellenwert einstellen, indem Sie die durationThreshold-Option in der observe()-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 im performance.eventCounts-Verzeichnis nachschlagen:

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

Konstruktor

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

Instanzeigenschaften

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

PerformanceEntry.duration Schreibgeschützt

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

PerformanceEntry.entryType Schreibgeschützt

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

PerformanceEntry.name Schreibgeschützt

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

PerformanceEntry.startTime Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der die timestamp-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.cancelable Schreibgeschützt

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

PerformanceEventTiming.interactionId Schreibgeschützt

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

PerformanceEventTiming.processingStart Schreibgeschützt

Gibt einen DOMHighResTimeStamp 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 Sie processingStart-startTime.

PerformanceEventTiming.processingEnd Schreibgeschützt

Gibt einen DOMHighResTimeStamp 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 Sie processingEnd-processingStart.

PerformanceEventTiming.target Schreibgeschützt

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

Instanzmethoden

PerformanceEventTiming.toJSON()

Gibt eine JSON-Darstellung des PerformanceEventTiming-Objekts zurück.

Beispiele

Erfassen von Ereignis-Timing-Informationen

Um Ereignis-Timing-Informationen zu erhalten, erstellen Sie eine PerformanceObserver-Instanz und rufen dann die observe()-Methode auf, wobei Sie "event" oder "first-input" als Wert der type-Option übergeben. Sie müssen buffered auf true setzen, um Zugriff auf Ereignisse zu erhalten, die der Benutzer-Agent beim Erstellen des Dokuments gepuffert hat. Der Callback des PerformanceObserver-Objekts wird dann mit einer Liste von PerformanceEventTiming-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 events observer.observe({ type: "event", buffered: true }); 

Sie können auch einen anderen durationThreshold 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