PerformanceEventTiming

Beschreibung

Diese API ermöglicht die Sichtbarkeit bei langsamen Ereignissen, indem sie Ereigniszeitstempel und Dauer für bestimmte Ereignistypen bereitstellt (siehe unten). Zum Beispiel können Sie die Zeit zwischen einer Benutzeraktion und dem Beginn ihres Ereignis-Handlers oder die Zeit, die ein Ereignis-Handler zum Ausführen benötigt, überwachen.

Diese API ist besonders nützlich für die Messung der Interaktion bis zur nächsten Wiedergabe (INP): der längsten Zeitspanne (abzüglich einiger Ausreißer) vom 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.

Normalerweise arbeiten Sie mit PerformanceEventTiming-Objekten, indem Sie eine Instanz von PerformanceObserver erstellen und dann deren 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 analysiert werden können. Siehe das nachfolgende Beispiel für mehr.

Standardmäßig werden PerformanceEventTiming-Einträge angezeigt, wenn ihre duration 104ms oder mehr beträgt. Forschungsergebnisse legen nahe, dass Benutzereingaben, die nicht innerhalb von 100ms bearbeitet werden, als langsam gelten und 104ms sind das erste Vielfache von 8, das größer als 100ms ist (aus Sicherheitsgründen wird diese API auf das nächste Vielfache von 8ms gerundet). Sie können jedoch den PerformanceObserver auf einen anderen Schwellenwert einstellen, indem Sie die durationThreshold-Option in der observe()-Methode verwenden.

Diese Schnittstelle erbt Methoden und Eigenschaften von ihrem übergeordneten Element, PerformanceEntry:

Exponierte Ereignisse

Die folgenden Ereignistypen werden von der Event Timing API angezeigt:

Bitte beachten Sie, dass die folgenden Ereignisse nicht in der Liste enthalten sind, da es sich um kontinuierliche Ereignisse handelt und zu diesem Zeitpunkt keine aussagekräftigen Ereigniszählungen oder Leistungsmetriken erhalten werden können: mousemove, pointermove, pointerrawupdate, touchmove, rad, drag.

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

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

Konstruktor

Diese Schnittstelle hat keinen eigenen Konstruktor. Siehe das nachfolgende Beispiel, um zu erfahren, wie Sie normalerweise die Informationen erhalten, die die PerformanceEventTiming-Schnittstelle bereitstellt.

Instanzeigenschaften

Diese Schnittstelle erweitert die folgenden PerformanceEntry-Eigenschaften für Ereignis-Timing-Leistungseintragstypen, indem sie wie folgt qualifiziert werden:

PerformanceEntry.duration Schreibgeschützt

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

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 zugeordneten Ereignisses zurück.

PerformanceEntry.startTime Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der die timestamp-Eigenschaft des zugeordneten Ereignisses darstellt. Dies ist die Zeit, zu der das Ereignis erstellt wurde und kann als Proxy für die Zeit betrachtet werden, zu der die Benutzerinteraktion stattfand.

Diese Schnittstelle unterstützt auch die folgenden Eigenschaften:

PerformanceEventTiming.cancelable Schreibgeschützt

Gibt die cancelable-Eigenschaft des zugeordneten Ereignisses zurück.

PerformanceEventTiming.interactionId Schreibgeschützt

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

PerformanceEventTiming.processingStart Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der die Zeit darstellt, zu der das Ereignisdispatch gestartet wurde. Um die Zeit zwischen einer Benutzeraktion und dem Zeitpunkt, an dem der Ereignis-Handler zu laufen beginnt, zu messen, berechnen Sie processingStart-startTime.

PerformanceEventTiming.processingEnd Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der die Zeit darstellt, zu der das Ereignisdispatch beendet wurde. Um die Zeit zu messen, die der Ereignis-Handler zum Ausführen benötigte, berechnen Sie processingEnd-processingStart.

PerformanceEventTiming.target Schreibgeschützt

Gibt das letzte Ziel des zugeordneten Ereignisses zurück, falls es nicht entfernt wird.

Instanzmethoden

PerformanceEventTiming.toJSON()

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

Beispiele

Abrufen von Ereignis-Timing-Informationen

Um Ereignis-Timing-Informationen zu erhalten, erstellen Sie eine Instanz von PerformanceObserver und rufen Sie dann seine observe()-Methode auf, wobei Sie "event" oder "first-input" als Wert der type-Option übergeben. Sie müssen auch buffered auf true setzen, um Zugriff auf Ereignisse zu erhalten, die der Benutzeragent beim Erstellen des Dokuments gepuffert hat. Der Callback des PerformanceObserver-Objekts wird dann mit einer Liste von PerformanceEventTiming-Objekten aufgerufen, die analysiert werden 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 104ms und der minimale mögliche Dauer-Schwellenwert ist 16ms.

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Intersection Observer API
• Page Visibility API