PerformanceMark: PerformanceMark() constructor

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

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

Parameters

name

A string representing the name of the mark.

markOptions Optional

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

detail Optional

Arbitrary metadata to include in the mark. Defaults to null.

devtools Optional

Some browsers have use a structured devtools object within the detail object 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.

dataType

A string which must be set to marker. Identifies as a marker.

color Optional

Defaults to "primary". Must be one of "primary", "primary-light", "primary-dark", "secondary", "secondary-light", "secondary-dark", "tertiary", "tertiary-light", "tertiary-dark", "error".

properties Optional

Array of key-value pairs. Values can be any JSON-compatible type.

tooltipText Optional

Short description for tooltip.

startTime Optional

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

Return value

A PerformanceMark object.

Exceptions

Examples

undefined

Creating named markers

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

js
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:

js
// 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

See also