PerformanceEventTiming

Diese API ermöglicht Einblicke in langsame Ereignisse, indem sie Zeitstempel von Ereignissen und deren Dauer für bestimmte Ereignistypen bereitstellt (siehe unten). Beispielsweise können Sie die Zeit zwischen einer Benutzeraktion und dem Start ihres Ereignishandlers überwachen oder die Zeit, die ein Ereignishandler benötigt, um abzulaufen.

Diese API ist besonders nützlich zur Messung der Interaction to Next Paint (INP): Dies ist die längste Zeit (abzüglich einiger Ausreißer) von dem Zeitpunkt, zu dem ein Benutzer mit Ihrer App interagiert, bis zu dem Zeitpunkt, an dem der Browser tatsächlich auf diese Interaktion reagieren konnte.

Normalerweise 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 Rückruf 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 mehr beträgt. Forschungsergebnisse legen nahe, dass Benutzereingaben, die nicht innerhalb von 100 ms verarbeitet werden, als langsam gelten, und 104 ms ist das erste Vielfache von 8, das größer ist als 100 ms (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 Option durationThreshold in der observe()-Methode verwenden.

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

Die folgenden Ereignistypen werden von der Event Timing API bereitgestellt:

Beachten Sie, dass die folgenden Ereignisse nicht in der Liste enthalten sind, da sie kontinuierliche Ereignisse sind und derzeit keine aussagekräftigen Ereigniszählungen oder Leistungsmetriken abgeleitet werden können: mousemove, pointermove, pointerrawupdate, touchmove, wheel, drag.

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

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

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.

Dieses Interface erweitert die folgenden PerformanceEntry-Eigenschaften für Ereignis-Timing-Performance-Entry-Typen, indem es sie wie folgt qualifiziert:

PerformanceEntry.duration Nur lesbar

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

PerformanceEntry.entryType Nur lesbar

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

PerformanceEntry.name Nur lesbar

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

PerformanceEntry.startTime Nur lesbar

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 Ersatz für die Zeit angesehen werden, zu der die Benutzerinteraktion aufgetreten ist.

Dieses Interface unterstützt auch die folgenden Eigenschaften:

PerformanceEventTiming.cancelable Nur lesbar

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

PerformanceEventTiming.interactionId Nur lesbar Experimentell

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

PerformanceEventTiming.processingStart Nur lesbar

Gibt einen DOMHighResTimeStamp zurück, der die Zeit darstellt, zu der die Ereignisdisposition begann. Um die Zeit zwischen einer Benutzeraktion und dem Beginn der Ausführung des Ereignishandlers zu messen, berechnen Sie processingStart-startTime.

PerformanceEventTiming.processingEnd Nur lesbar

Gibt einen DOMHighResTimeStamp zurück, der die Zeit darstellt, zu der die Ereignisdisposition endete. Um die Zeit zu messen, die der Ereignishandler für die Ausführung benötigt hat, berechnen Sie processingEnd-processingStart.

PerformanceEventTiming.target Nur lesbar

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

PerformanceEventTiming.toJSON()

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

Um Ereignis-Timing-Informationen abzurufen, erstellen Sie eine PerformanceObserver-Instanz und rufen dann ihre observe()-Methode auf, wobei Sie "event" oder "first-input" als Wert der type-Option übergeben. Sie müssen auch buffered auf true setzen, um auf Ereignisse zuzugreifen, die der User Agent während der Erstellung des Dokuments zwischengespeichert hat. Der Rückruf 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 ist 104 ms und die minimal mögliche Dauergrenze beträgt 16 ms.

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

• Intersection Observer API
• Page Visibility API