PerformanceMark: PerformanceMark() constructor

Baseline Widely available

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

Note: This feature is available inWeb Workers.

ThePerformanceMark() constructor creates atimestamp with the given name.

Unlikeperformance.mark(), performance marks created by the constructor aren't added to the browser's performance timeline. This means that calls to thePerformance interface'sgetEntries*() methods (getEntries(),getEntriesByName() orgetEntriesByType()) won't show entries for these marks.

Syntax

new PerformanceMark(name)new PerformanceMark(name, markOptions)

Parameters

name

A string representing the name of the mark.

markOptionsOptional

An object for specifying a timestamp and additional metadata for the mark.

detailOptional

Arbitrary metadata to include in the mark. Defaults tonull.

devtoolsOptional Experimental

Some browsers have use a structureddevtools object within thedetail object as part of an Extensibility API that surfaces these in custom tracks in performance traces. See theChrome's Extensibility API documentation for more information.

dataTypeExperimental: A string which must be set tomarker. Identifies as a marker.
colorOptional Experimental: Defaults to"primary". Must be one of"primary","primary-light","primary-dark","secondary","secondary-light","secondary-dark","tertiary","tertiary-light","tertiary-dark","error".
propertiesOptional Experimental: Array of key-value pairs. Values can be any JSON-compatible type.
tooltipTextOptional Experimental: Short description for tooltip.

startTimeOptional

DOMHighResTimeStamp to use as the mark time. Defaults toperformance.now().

Return value

APerformanceMark object.

Exceptions

SyntaxError: Thrown if thename given to this method already exists in thePerformanceTiming interface.
TypeError: Thrown ifstartTime is negative.

Examples

Creating named markers

The following example shows howPerformanceMark entries are constructed and then aren't part of the browser's performance timeline.

new PerformanceMark("squirrel");new PerformanceMark("monkey");new PerformanceMark("dog");const allEntries = performance.getEntriesByType("mark");console.log(allEntries.length);// 0

DevTools Extensibility API

For browsers that support theExtensibility API you can use thedetail parameter to provide more details in adevtools object that will be used to display this in performance profiles:

// Marker indicating when the processed image was uploadedperformance.mark("Image Upload", {  detail: {    devtools: {      dataType: "marker",      color: "secondary",      properties: [        ["Image Size", "2.5MB"],        ["Upload Destination", "Cloud Storage"],      ],      tooltipText: "Processed image uploaded",    },  },});