PerformanceEntry: name property

Baseline Widely available

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

Note: This feature is available in Web Workers.

The read-only name property of the PerformanceEntry interface is a string representing the name for a performance entry. It acts as an identifier, but it does not have to be unique. The value depends on the subclass.

Value

A string. The value depends on the subclass of the PerformanceEntry object as shown by the table below.

Subclass Value
LargestContentfulPaint Always returns an empty string.
LayoutShift Always returns "layout-shift".
PerformanceElementTiming One of the following strings:
  • "image-paint"
  • "text-paint"
PerformanceEventTiming The associated event's type.
PerformanceLongTaskTiming One of the following strings:
  • "cross-origin-ancestor"
  • "cross-origin-descendant"
  • "cross-origin-unreachable"
  • "multiple-contexts"
  • "same-origin-ancestor"
  • "same-origin-descendant"
  • "same-origin"
  • "self"
  • "unknown"
PerformanceMark The name used when the mark was created by calling performance.mark().
PerformanceMeasure The name used when the measure was created by calling performance.measure().
PerformanceNavigationTiming The resolved URL of the requested resource. Note that this omits any text fragments or other fragment directives. The value doesn't change even if the request is redirected.
PerformancePaintTiming One of the following strings:
  • "first-paint"
  • "first-contentful-paint"
PerformanceResourceTiming The resolved URL of the requested resource. This value doesn't change even if the request is redirected.
TaskAttributionTiming Always returns "unknown".
VisibilityStateEntry One of the following strings:
  • "visible"
  • "hidden"

Examples

Filtering performance entries by name

When the PerformanceEntry is a PerformanceResourceTiming object, the name property refers to the resolved URL of the requested resource. In this case, the name property can be useful to filter out specific resources, for example all SVG images.

js
// Log durations of SVG resources
performance.getEntriesByType("resource").forEach((entry) => {
  if (entry.name.endsWith(".svg")) {
    console.log(`${entry.name}'s duration: ${entry.duration}`);
  }
});

Getting performance entries by name

Both Performance and PerformanceObserver provide methods that allow you to get performance entries by name directly. You don't necessarily need the name property for that, instead you might use Performance.getEntriesByName() or PerformanceObserverEntryList.getEntriesByName().

js
// Log all marks named "debug-marks" at this point in time
const debugMarks = performance.getEntriesByName("debug-mark", "mark");
debugMarks.forEach((entry) => {
  console.log(`${entry.name}'s startTime: ${entry.startTime}`);
});

// PerformanceObserver version
// Log all marks named "debug-marks" when they happen
function perfObserver(list, observer) {
  list.getEntriesByName("debug-mark", "mark").forEach((entry) => {
    console.log(`${entry.name}'s startTime: ${entry.startTime}`);
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });

Specifications

Specification
Performance Timeline
# dom-performanceentry-name

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
name

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also