PerformanceObserver: PerformanceObserver() Konstruktor

callback

Ein PerformanceObserverCallback-Callback, das aufgerufen wird, wenn beobachtete Performance-Ereignisse aufgezeichnet werden. Wenn der Callback aufgerufen wird, sind die folgenden Parameter verfügbar:

entries

Die Liste der Performance-Beobachter-Einträge.

observer

Das observer-Objekt, das die oben genannten Einträge empfängt.

options

Ein Objekt mit den folgenden Eigenschaften:

droppedEntriesCount

Die Anzahl der Einträge, die nicht aufgezeichnet werden konnten, weil der interne Puffer des Performance-Objekts voll war.

Beachten Sie, dass dies nur das erste Mal bereitgestellt wird, wenn der Beobachter den Callback aufruft, wenn die gepufferten Einträge wiedergegeben werden. Nachdem der Beobachter beginnt, zukünftige Beobachtungen vorzunehmen, benötigt er den Puffer nicht mehr. Nach dem ersten Mal wird options ein leeres Objekt ({}) sein.

Ein neues PerformanceObserver-Objekt, das den angegebenen callback aufruft, wenn beobachtete Performance-Ereignisse auftreten.

Das folgende Beispiel erstellt einen PerformanceObserver, der auf "mark" (PerformanceMark) und "measure" (PerformanceMeasure) Ereignisse achtet. Der perfObserver-Callback liefert eine list (PerformanceObserverEntryList), die es Ihnen ermöglicht, beobachtete Performance-Einträge zu erhalten.

function perfObserver(list, observer) {
  list.getEntries().forEach((entry) => {
    if (entry.entryType === "mark") {
      console.log(`${entry.name}'s startTime: ${entry.startTime}`);
    }
    if (entry.entryType === "measure") {
      console.log(`${entry.name}'s duration: ${entry.duration}`);
    }
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });

Sie können PerformanceObserver mit einem buffered-Flag verwenden, um frühere Performance-Einträge abzuhören. Es gibt jedoch eine Puffergrößenbeschränkung. Der Performance-Observer-Callback enthält ein options-Objekt: Beim ersten Aufruf des Callbacks durch den Beobachter hat der options-Parameter eine droppedEntriesCount-Eigenschaft, die angibt, wie viele Einträge aufgrund des vollen Pufferspeichers verloren gingen. Nachfolgende Callbacks haben einen leeren options-Parameter.

function perfObserver(list, observer, options) {
  list.getEntries().forEach((entry) => {
    // do something with the entries
  });
  if (options?.droppedEntriesCount > 0) {
    console.warn(
      `${options?.droppedEntriesCount} entries got dropped due to the buffer being full.`,
    );
  }
}

const observer = new PerformanceObserver(perfObserver);
observer.observe({ type: "resource", buffered: true });

Normalerweise gibt es viele Ressourcentimingeinträge, und speziell für diese Einträge können Sie ebenfalls einen größeren Puffer mit performance.setResourceTimingBufferSize() einstellen und das resourcetimingbufferfull Ereignis beobachten.