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-Observer-Einträge.

observer

Das observer Objekt, das die oben genannten Einträge erhält.

options

Ein Objekt mit den folgenden Eigenschaften:

droppedEntriesCount

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

Beachten Sie, dass dies nur beim ersten Aufruf des Callbacks durch den Beobachter bereitgestellt wird, wenn die gepufferten Einträge wiedergegeben werden. Sobald der Beobachter beginnt, zukünftige Beobachtungen zu machen, muss er den Puffer nicht mehr verwenden. 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 auf vergangene Performance-Einträge zu hören. Es gibt jedoch eine Begrenzung der Pufferspeichergröße. Der Performance-Observer-Callback enthält ein options-Objekt: Beim ersten Aufruf des Callbacks durch den Beobachter wird der options-Parameter eine droppedEntriesCount-Eigenschaft enthalten, die Ihnen mitteilt, wie viele Einträge aufgrund des vollen Pufferspeichers verworfen wurden. 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 });

In der Regel gibt es viele Resource-Timing-Einträge, und speziell für diese Einträge können Sie auch einen größeren Puffer mit performance.setResourceTimingBufferSize() festlegen und auf das resourcetimingbufferfull Ereignis achten.