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)
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 optional droppedEntriesCount
parameter that informs you about the amount of lost entries due to the buffer storage being full.
function perfObserver(list, observer, droppedEntriesCount) {
list.getEntries().forEach((entry) => {
});
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.