W3cubDocs

/Web APIs

PerformanceObserver: observe() method

The observe() method of the PerformanceObserver interface is used to specify the set of performance entry types to observe.

See PerformanceEntry.entryType for a list of entry types and PerformanceObserver.supportedEntryTypes for a list of entry types the user agent supports.

When a matching performance entry is recorded, the performance observer's callback function—set when creating the PerformanceObserver—is invoked.

Syntax

js

observe(options)

Parameters

options

An object with the following possible members:

buffered

A boolean flag to indicate whether buffered entries should be queued into the observer's buffer. Must be used only with the "type" option.

durationThreshold

A DOMHighResTimeStamp defining the threshold for PerformanceEventTiming entries. Defaults to 104ms and is rounded to the nearest of 8ms. Lowest possible threshold is 16ms. May not be used together with the entryTypes option.

entryTypes

An array of string objects, each specifying one performance entry type to observe. May not be used together with the "type", "buffered", or "durationThreshold" options.

See PerformanceEntry.entryType for a list of valid performance entry type names. Unrecognized types are ignored, though the browser may output a warning message to the console to help developers debug their code. If no valid types are found, observe() has no effect.

type

A single string specifying exactly one performance entry type to observe. May not be used together with the entryTypes option.

Return value

None (undefined).

Examples

Watching multiple performance entry types

This example creates a PerformanceObserver and watches for "mark" and "measure" entry types as specified by the entryTypes option given in the observe() method.

js

const observer = new PerformanceObserver((list, obj) => {
  list.getEntries().forEach((entry) => {
    // Process "mark" and "measure" events
  });
});
observer.observe({ entryTypes: ["mark", "measure"] });

Watching a single performance entry type

The following example retrieves buffered events and subscribes to newer events for resource timing events (PerformanceResourceTiming) using the buffered and type configuration options. Whenever you need to configure the observer to use the buffered or durationThreshold option, use type instead of entryType. Collecting multiple types of performance entry types will not work otherwise.

js

const observer = new PerformanceObserver((list, obj) => {
  list.getEntries().forEach((entry) => {
    // Process "resource" events
  });
});
observer.observe({ type: "resource", buffered: true });

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
observe 52 79 57 No 39 11 52 52 57 41 11 6.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/observe