PerformanceEventTiming

Diese API ermöglicht Einblick in langsame Ereignisse, indem sie Ereignis-Timestamps und die Dauer für bestimmte Ereignistypen bereitstellt (siehe unten). So können Sie zum Beispiel die Zeit zwischen einer Benutzeraktion und dem Beginn des zugehörigen Ereignishandlers oder die Ausführungsdauer eines Ereignishandlers überwachen.

Diese API ist besonders nützlich, um die erste Eingabeverzögerung (FID) zu messen: die Zeit vom Zeitpunkt der ersten Benutzerinteraktion mit Ihrer App bis zu dem Zeitpunkt, an dem der Browser tatsächlich in der Lage ist, auf diese Interaktion zu reagieren.

Typischerweise arbeiten Sie mit PerformanceEventTiming-Objekten, indem Sie eine Instanz des PerformanceObserver erstellen und dann dessen observe()-Methode aufrufen, wobei Sie "event" oder "first-input" als Wert der type-Option übergeben. Der PerformanceObserver-Objektaufruf wird dann mit einer Liste von PerformanceEventTiming-Objekten aufgerufen, die Sie analysieren können. Sehen Sie das Beispiel unten für mehr.

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

Dieses Interface erbt Methoden und Eigenschaften von seinem Elternteil, PerformanceEntry:

Die folgenden Ereignistypen werden von der Event Timing API bereitgestellt:

Beachten Sie, dass die folgenden Ereignisse nicht in der Liste aufgeführt sind, da es sich um kontinuierliche Ereignisse handelt und derzeit keine aussagekräftigen Ereigniszählungen oder Leistungsmetriken gewonnen werden können: mousemove, pointermove, pointerrawupdate, touchmove, wheel, drag.

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

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

Dieses Interface hat keinen eigenen Konstruktor. Sehen Sie 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-Leistungseintragstypen, indem es sie wie folgt qualifiziert:

PerformanceEntry.duration Schreibgeschützt

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

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 zugehörigen Ereignisses zurück.

PerformanceEntry.startTime Schreibgeschützt

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 Proxy für die Zeit betrachtet werden, zu der die Benutzerinteraktion stattfand.

Dieses Interface unterstützt auch die folgenden Eigenschaften:

PerformanceEventTiming.cancelable Schreibgeschützt

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

PerformanceEventTiming.interactionId Schreibgeschützt Experimentell

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

PerformanceEventTiming.processingStart Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der die Zeit darstellt, zu der die Ereignisausgabe begann. Um die Zeit zwischen einer Benutzeraktion und der Zeit, zu der der Ereignishandler zu laufen beginnt, zu messen, berechnen Sie processingStart-startTime.

PerformanceEventTiming.processingEnd Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der die Zeit darstellt, zu der die Ereignisausgabe endete. Um die Zeit, die der Ereignishandler zu laufen benötigte, zu messen, berechnen Sie processingEnd-processingStart.

PerformanceEventTiming.target Schreibgeschützt

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

PerformanceEventTiming.toJSON()

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

Um Informationen zur Ereignis-Timing zu erhalten, erstellen Sie eine Instanz von PerformanceObserver und rufen dann dessen 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 Nutzer-Agent während des Dokumentaufbaus gepuffert hat. Der PerformanceObserver-Objektaufruf 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 ein anderes durationThreshold festlegen. Der Standardwert ist 104 ms und die minimale mögliche Dauer-Schwelle beträgt 16 ms.

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

Die erste Eingabeverzögerung oder FID misst die Zeit vom Zeitpunkt der ersten Interaktion eines Benutzers mit einer Seite (d. h. wenn er auf einen Link klickt oder auf eine Schaltfläche tippt) bis zu dem Zeitpunkt, an dem der Browser tatsächlich in der Lage ist, mit der Verarbeitung von Ereignishandlern als Reaktion auf diese Interaktion zu beginnen.

// Keep track of whether (and when) the page was first hidden, see:
// https://github.com/w3c/page-visibility/issues/29
// NOTE: ideally this check would be performed in the document <head>
// to avoid cases where the visibility state changes before this code runs.
let firstHiddenTime = document.visibilityState === "hidden" ? 0 : Infinity;
document.addEventListener(
  "visibilitychange",
  (event) => {
    firstHiddenTime = Math.min(firstHiddenTime, event.timeStamp);
  },
  { once: true },
);

// Sends the passed data to an analytics endpoint. This code
// uses `/analytics`; you can replace it with your own URL.
function sendToAnalytics(data) {
  const body = JSON.stringify(data);
  // Use `navigator.sendBeacon()` if available,
  // falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon("/analytics", body)) ||
    fetch("/analytics", { body, method: "POST", keepalive: true });
}

// Use a try/catch instead of feature detecting `first-input`
// support, since some browsers throw when using the new `type` option.
// https://webkit.org/b/209216
try {
  function onFirstInputEntry(entry) {
    // Only report FID if the page wasn't hidden prior to
    // the entry being dispatched. This typically happens when a
    // page is loaded in a background tab.
    if (entry.startTime < firstHiddenTime) {
      const fid = entry.processingStart - entry.startTime;

      // Report the FID value to an analytics endpoint.
      sendToAnalytics({ fid });
    }
  }

  // Create a PerformanceObserver that calls
  // `onFirstInputEntry` for each entry.
  const po = new PerformanceObserver((entryList) => {
    entryList.getEntries().forEach(onFirstInputEntry);
  });

  // Observe entries of type `first-input`, including buffered entries,
  // i.e. entries that occurred before calling `observe()` below.
  po.observe({
    type: "first-input",
    buffered: true,
  });
} catch (e) {
  // Do nothing if the browser doesn't support this API.
}

• Intersection Observer API
• Page Visibility API