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 in Web Workers.
The PerformanceMark() constructor creates a timestamp with the given name.
Unlike performance.mark(), performance marks created by the constructor aren't added to the browser's performance timeline. This means that calls to the Performance interface's getEntries*() methods (getEntries(), getEntriesByName() or getEntriesByType()) 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 to
null.devtoolsOptional Experimental-
Some browsers have use a structured
devtoolsobject within thedetailobject as part of an Extensibility API that surfaces these in custom tracks in performance traces. See the Chrome's Extensibility API documentation for more information.dataTypeExperimental-
A string which must be set to
marker. 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-
DOMHighResTimeStampto use as the mark time. Defaults toperformance.now().
Return value
A PerformanceMark object.
Exceptions
SyntaxError: Thrown if thenamegiven to this method already exists in thePerformanceTiminginterface.TypeError: Thrown ifstartTimeis negative.
Examples
Creating named markers
The following example shows how PerformanceMark 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 the Extensibility API you can use the detail parameter to provide more details in a devtools object that will be used to display this in performance profiles:
// Marker indicating when the processed image was uploaded
performance.mark("Image Upload", {
detail: {
devtools: {
dataType: "marker",
color: "secondary",
properties: [
["Image Size", "2.5MB"],
["Upload Destination", "Cloud Storage"],
],
tooltipText: "Processed image uploaded",
},
},
});
Specifications
| Specification |
|---|
| User Timing # dom-performancemark-constructor |