User Timing API

Interface: PerformanceMark

The PerformanceMark interface has the following read-only properties (directly or inherited from PerformanceEntry):

• detail provides additional information about the mark.
• duration is always 0 (a mark has no duration).
• entryType is always "mark".
• name is the name given when the mark was created.
• startTime is the timestamp when mark() was called.

• performance.mark() adds a performance mark to the browser's performance timeline.
• PerformanceMark() constructs a PerformanceMark object that isn't added to the browser's performance timeline.

• performance.getEntriesByType("mark") gets all marks.
• performance.getEntriesByName("myMarker", "mark") gets all marks with the name "myMarker".
• performance.getEntries() gets all entries (filter as needed).

• performance.clearMarks("myMarker") removes the performance marker with the name "myMarker".
• performance.clearMarks() removes all performance markers.

Interface: PerformanceMeasure

The PerformanceMeasure interface has the following read-only properties (directly or inherited from PerformanceEntry):

• detail provides additional information about the measure.
• duration is a DOMHighResTimeStamp that is the duration of the measure (typically, the end mark timestamp minus the start mark timestamp).
• entryType is always "measure".
• name is the name given when the measure was created.
• startTime is the timestamp when measure() was called.

• performance.measure(measureName, startMarkName, endMarkName) creates a measure where measureName is the measure's name and startMarkName and endMarkName are the start and end names, respectively, of the marks the measure will be placed between (in the performance timeline).

• performance.getEntriesByType("measure") gets all measures.
• performance.getEntriesByName("myMeasure", "measure") gets all measures with the name "myMeasure".
• performance.getEntries() gets all entries (filter as needed).

• performance.clearMeasures("myMeasure") removes the performance measure with the name "myMeasure".
• performance.clearMeasures() removes all performance measures.

Typically, you identify the most critical paths of your application and measure how long it takes from start to finish. For example, you can measure how long it takes to login:

// Place at a location in the code that starts login
performance.mark("login-started");

// Place at a location in the code that finishes login
performance.mark("login-finished");

// Measure login duration
const loginMeasure = performance.measure(
  "login-duration",
  "login-started",
  "login-finished"
);

// Send to analytics endpoint
// or log to the console
console.log(loginMeasure.duration);

• User Timing specification

• Using the User Timing API
• PerformanceMark
• PerformanceMeasure