PerformanceEntry

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨September 2017⁩.

Note: This feature is available inWeb Workers.

ThePerformanceEntry 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 ofPerformanceEntry. This includes entries for resource loading, event timing, and more.

A performance entry can also be created by calling thePerformance.mark() orPerformance.measure() methods at an explicit point in an application. This allows you to add your own metrics to the performance timeline.

ThePerformanceEntry instances will always be one of the following subclasses:

Instance properties

PerformanceEntry.nameRead only: A string representing the name for a performance entry. The value depends on the subtype.
PerformanceEntry.entryTypeRead only: A string representing the type of performance metric. For example,"mark" whenPerformanceMark is used.
PerformanceEntry.startTimeRead only: ADOMHighResTimeStamp representing the starting time for the performance metric.
PerformanceEntry.durationRead only: ADOMHighResTimeStamp representing the duration of the performance entry.

Instance methods

PerformanceEntry.toJSON(): Returns a JSON representation of thePerformanceEntry object.

Example

Working with performance entries

The following example createsPerformanceEntry objects that are of the typesPerformanceMark andPerformanceMeasure.ThePerformanceMark andPerformanceMeasure subclasses inherit theduration,entryType,name, andstartTime properties fromPerformanceEntry and set them to their appropriate values.

// Place at a location in the code that starts loginperformance.mark("login-started");// Place at a location in the code that finishes loginperformance.mark("login-finished");// Measure login durationperformance.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"] });