W3cubDocs

/Web APIs

PerformanceObserver: PerformanceObserver() constructor

The PerformanceObserver() constructor creates a new PerformanceObserver object with the given observer callback. The observer callback is invoked when performance entry events are recorded for the entry types that have been registered, via the observe() method.

Syntax

js

new PerformanceObserver(callback)

Parameters

callback

A PerformanceObserverCallback callback that will be invoked when observed performance events are recorded. When the callback is invoked, the following parameters are available:

entries

The list of performance observer entries.

observer

The observer object that is receiving the above entries.

droppedEntriesCount Optional

The number of buffered entries which got dropped from the buffer due to the buffer being full. See the buffered flag.

Return value

A new PerformanceObserver object which will call the specified callback when observed performance events occur.

Examples

Creating a PerformanceObserver

The following example creates a PerformanceObserver watching for "mark" (PerformanceMark) and "measure" (PerformanceMeasure) events. The perfObserver callback provides a list (PerformanceObserverEntryList) which allows you get observed performance entries.

js

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"] });

Dropped buffer entries

You can use PerformanceObserver with a buffered flag to listen to past performance entries. There is a buffer size limit, though. The performance observer callback contains an optional droppedEntriesCount parameter that informs you about the amount of lost entries due to the buffer storage being full.

js

function perfObserver(list, observer, droppedEntriesCount) {
  list.getEntries().forEach((entry) => {
    // do something with the entries
  });
  if (droppedEntriesCount > 0) {
    console.warn(
      `${droppedEntriesCount} entries got dropped due to the buffer being full.`,
    );
  }
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ type: "resource", buffered: true });

Usually, there are a lot of resource timing entries, and for these entries specifically, you can also set a larger buffer using performance.setResourceTimingBufferSize() and watch for the resourcetimingbufferfull event.

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
PerformanceObserver 52 79 57 No 39 11 52 52 57 41 11 6.0
droppedEntriesCount 95 95 No No 81 No 95 95 No 67 No 17.0

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver/PerformanceObserver