Baseline Widely available *
Note: This feature is available in Web Workers.
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.
new PerformanceObserver(callback)
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
observer
The observer object that is receiving the above entries.
options
An object with the following properties:
droppedEntriesCount
The number of entries which could not be recorded because the Performance object's internal buffer was full.
Note that this is only provided the first time the observer calls the callback, when the buffered entries are replayed. Once the observer starts making future observations, it no longer needs to use the buffer. After the first time, options will be an empty object ({}).
A new PerformanceObserver object which will call the specified callback when observed performance events occur.
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.
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"] });
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 options object: the first time the observer calls the callback, the options parameter will have a droppedEntriesCount property that tells you how many entries were dropped due to the buffer storage being full. Subsequent callbacks will have an empty 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 });
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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4