PerformanceEventTiming

Konstruktor

Diese Schnittstelle hat keinen eigenen Konstruktor. Wie Sie die von der PerformanceEventTiming-Schnittstelle bereitgestellten Informationen üblicherweise abrufen, zeigt das Beispiel unten.

Instanzeigenschaften

Diese Schnittstelle erweitert die folgenden Eigenschaften von PerformanceEntry für Performance-Einträge zur Ereigniszeitmessung und legt ihre Bedeutung wie folgt fest:

PerformanceEntry.duration Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der die Zeit 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 der Eigenschaft timestamp des zugehörigen Ereignisses entspricht. 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 Ereignisweitergabe 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 Ereignisweitergabe endete. Um die Ausführungszeit 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()

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

Beschreibung

Diese API macht langsame Ereignisse sichtbar, indem sie für bestimmte Ereignistypen Zeitstempel und Dauer bereitstellt (siehe unten). So können Sie 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) zwischen einer Interaktion mit Ihrer Anwendung und dem Zeitpunkt, zu dem der Browser tatsächlich darauf 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. Untersuchungen legen nahe, dass eine Benutzereingabe als langsam gilt, wenn sie nicht innerhalb von 100 ms verarbeitet wird. 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 jedoch mit der Option durationThreshold der Methode observe() einen anderen Schwellenwert für den PerformanceObserver festlegen.

Beachten Sie, dass Einträge nur dann zwischengespeichert werden, wenn ihre duration mindestens 104 ms beträgt. Das Festlegen von durationThreshold ändert daran nichts. Der Eintrag "first-input" ist eine Ausnahme: Er wird auch dann gemeldet, wenn seine duration unter dem Schwellenwert liegt, und auch dann zwischengespeichert, wenn sie unter 104 ms liegt.

Erfasste Ereignisse

Die folgenden Ereignistypen werden von der Event Timing API erfasst:

Beachten Sie, dass die folgenden Ereignisse nicht in der Liste enthalten sind, weil sie kontinuierliche Ereignisse sind und sich derzeit weder aussagekräftige Ereigniszahlen noch Leistungsmetriken für sie ermitteln lassen: mousemove, pointermove, pointerrawupdate, touchmove, wheel, drag.

Eine Liste aller erfassten Ereignisse erhalten Sie auch, indem Sie 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 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 auf Ereignisse zugreifen zu können, 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. Dieser Aufruf liefert frühere Einträge mit einer Dauer von mindestens 104 ms und neue Einträge mit einer Dauer von mindestens 16 ms, da für den Puffer stets der Standardwert von 104 ms gilt.

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Intersection Observer API
• Page Visibility API