PerformanceEventTiming

Beschreibung

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

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

Üblicherweise arbeiten Sie mit PerformanceEventTiming-Objekten, indem Sie eine PerformanceObserver-Instanz erstellen und anschließend deren Methode observe() aufrufen. Dabei übergeben Sie "event" oder "first-input" als Wert der Option type. Der Callback des PerformanceObserver-Objekts wird dann 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. Forschungsergebnisse deuten darauf hin, dass eine Benutzereingabe als langsam gilt, wenn sie nicht innerhalb von 100 ms verarbeitet wird. 104 ms ist das erste Vielfache von 8, das größer als 100 ms ist (aus Sicherheitsgründen rundet diese API auf das nächste Vielfache von 8 ms). Sie können für den PerformanceObserver jedoch einen anderen Schwellenwert festlegen, indem Sie die Option durationThreshold in der Methode observe() verwenden.

Dieses Interface erbt Methoden und Eigenschaften von seinem übergeordneten Interface PerformanceEntry:

Bereitgestellte Ereignisse

Die Event Timing API stellt die folgenden Ereignistypen bereit:

Die folgenden Ereignisse sind nicht in der Liste enthalten, da es sich um kontinuierliche Ereignisse handelt und sich für sie derzeit keine aussagekräftigen Ereigniszahlen oder Leistungsmetriken ermitteln lassen: mousemove, pointermove, pointerrawupdate, touchmove, wheel, drag.

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

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

Konstruktor

Dieses Interface hat keinen eigenen Konstruktor. Wie Sie die Informationen, die das PerformanceEventTiming-Interface enthält, üblicherweise abrufen, zeigt das Beispiel unten.

Instanzeigenschaften

Dieses Interface erweitert die folgenden Eigenschaften von PerformanceEntry für Performance-Einträge des Typs Event Timing mit den jeweils beschriebenen Bedeutungen:

PerformanceEntry.duration Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der die Zeitspanne von startTime bis zur nächsten Darstellung auf dem Bildschirm angibt (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 angibt. Dies ist der Zeitpunkt, zu dem das Ereignis erstellt wurde, und kann als Näherungswert für den Zeitpunkt der Benutzerinteraktion betrachtet werden.

Dieses Interface 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. Um die Zeit zwischen einer Benutzeraktion und dem Beginn der Ausführung des Event-Handlers zu messen, berechnen Sie processingStart-startTime.

PerformanceEventTiming.processingEnd Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der den Zeitpunkt angibt, zu dem die Weitergabe des Ereignisses endete. Um die Ausführungsdauer des Event-Handlers zu messen, 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 ein als JSON serialisierbares einfaches Objekt zurück, das das PerformanceEventTiming-Objekt repräsentiert. Wird von JSON.stringify() automatisch aufgerufen.

Beispiele

Informationen zum Event Timing abrufen

Um Informationen zum Event Timing abzurufen, erstellen Sie eine PerformanceObserver-Instanz und rufen anschließend 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 Zugriff auf Ereignisse zu erhalten, die der User Agent während der Erstellung des Dokuments zwischengespeichert 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 festlegen. Der Standardwert beträgt 104 ms; der niedrigste mö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