The PerformanceEntry
object encapsulates a single performance metric that is part of the browser's performance timeline.
The Performance API offers built-in metrics which are specialized subclasses of PerformanceEntry
. This includes entries for resource loading, event timing, first input delay (FID), and more.
A performance entry can also be created by calling the Performance.mark()
or Performance.measure()
methods at an explicit point in an application. This allows you to add your own metrics to the performance timeline.
The PerformanceEntry
instances will always be one of the following subclasses:
The following example creates PerformanceEntry
objects that are of the types PerformanceMark
and PerformanceMeasure
. The PerformanceMark
and PerformanceMeasure
subclasses inherit the duration
, entryType
, name
, and startTime
properties from PerformanceEntry
and set them to their appropriate values.
performance.mark("login-started");
performance.mark("login-finished");
performance.measure("login-duration", "login-started", "login-finished");
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"] });