PerformanceEventTiming

Konstruktor

Diese Schnittstelle hat keinen eigenen Konstruktor. Das Beispiel unten zeigt, wie Sie üblicherweise auf die Informationen zugreifen, die die Schnittstelle PerformanceEventTiming bereitstellt.

Instanzeigenschaften

Diese Schnittstelle erweitert die folgenden Eigenschaften von PerformanceEntry für Performance-Einträge zur Ereigniszeitmessung, indem sie diese wie folgt konkretisiert:

PerformanceEntry.duration Schreibgeschützt

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

PerformanceEntry.entryType Schreibgeschützt

Gibt "event" (für lang andauernde 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 Eigenschaft timestamp des zugehörigen Ereignisses darstellt. Dies ist der Zeitpunkt, zu dem das Ereignis erstellt wurde, und kann als Näherungswert für den Zeitpunkt der Benutzerinteraktion betrachtet werden.

Diese Schnittstelle unterstützt außerdem die folgenden Eigenschaften:

PerformanceEventTiming.cancelable Schreibgeschützt

Gibt die Eigenschaft cancelable 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 den Zeitpunkt angibt, zu dem die Weitergabe des Ereignisses begann. Berechnen Sie processingStart-startTime, um die Zeit zwischen einer Benutzeraktion und dem Beginn der Ausführung des Event-Handlers zu messen.

PerformanceEventTiming.processingEnd Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der den Zeitpunkt angibt, zu dem die Weitergabe des Ereignisses endete. Berechnen Sie processingEnd-processingStart, um die Ausführungszeit des Event-Handlers zu messen.

PerformanceEventTiming.target Schreibgeschützt

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

Instanzmethoden

PerformanceEventTiming.toJSON()

Überschreibt die Methode PerformanceEntry.toJSON(), um eine JSON-Darstellung des PerformanceEventTiming-Objekts zurückzugeben.

Beschreibung

Diese API macht langsame Ereignisse sichtbar, indem sie Zeitstempel und Dauer für bestimmte Ereignistypen bereitstellt (siehe unten). Sie können beispielsweise die Zeit zwischen einer Benutzeraktion und dem Beginn ihres Event-Handlers oder die Ausführungszeit eines Event-Handlers überwachen.

Diese API ist besonders nützlich, um Interaction to Next Paint (INP) zu messen: die längste Zeitspanne (abzüglich einiger Ausreißer) vom Zeitpunkt der Interaktion eines Benutzers mit Ihrer Anwendung bis zu dem Zeitpunkt, an dem der Browser tatsächlich auf diese Interaktion reagieren konnte.

Üblicherweise arbeiten Sie mit PerformanceEventTiming-Objekten, indem Sie eine Instanz von PerformanceObserver erstellen und dann deren Methode observe() aufrufen. Dabei übergeben Sie "event" oder "first-input" als Wert der Option type. Der Callback des PerformanceObserver-Objekts wird anschließend mit einer Liste von PerformanceEventTiming-Objekten aufgerufen, die Sie analysieren können. Weitere Informationen finden Sie im Beispiel unten.

Standardmäßig werden PerformanceEventTiming-Einträge bereitgestellt, wenn ihre duration mindestens 104 ms beträgt. Untersuchungen zufolge gelten Benutzereingaben, die nicht innerhalb von 100 ms verarbeitet werden, als langsam. 104 ms ist das erste Vielfache von 8 über 100 ms (aus Sicherheitsgründen rundet diese API auf das nächste Vielfache von 8 ms). Sie können für den PerformanceObserver jedoch mit der Option durationThreshold der Methode observe() einen anderen Schwellenwert festlegen.

Erfasste Ereignisse

Die Event Timing API erfasst die folgenden Ereignistypen:

Beachten Sie, dass die folgenden Ereignisse nicht in der Liste enthalten sind, da es sich um kontinuierliche Ereignisse handelt und derzeit weder aussagekräftige Ereigniszahlen noch Performance-Metriken dafür ermittelt werden können: mousemove, pointermove, pointerrawupdate, touchmove, wheel, drag.

Um eine Liste aller erfassten Ereignisse zu erhalten, können Sie auch die Schlüssel in der Map performance.eventCounts nachschlagen:

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

Beispiele

Informationen zur Ereigniszeitmessung abrufen

Um Informationen zur Ereigniszeitmessung abzurufen, erstellen Sie eine Instanz von PerformanceObserver und rufen dann deren Methode observe() auf. Dabei übergeben Sie "event" oder "first-input" als Wert der Option type. Außerdem müssen Sie buffered auf true setzen, um auf Ereignisse zugreifen zu können, die der User Agent während der Erstellung des Dokuments zwischengespeichert hat. Der Callback des PerformanceObserver-Objekts wird anschließend 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 festlegen. Der Standardwert beträgt 104 ms; der kleinstmögliche Schwellenwert für die Dauer beträgt 16 ms.

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Intersection Observer API
• Page Visibility API