W3cubDocs

/Web APIs

Performance: mark() method

The mark() method creates a named PerformanceMark object representing a high resolution timestamp marker in the browser's performance timeline.

Syntax

js

mark(name)
mark(name, markOptions)

Parameters

name

A string representing the name of the mark. Must not be the same name as one of the properties of the deprecated PerformanceTiming interface.

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. Must be structured-cloneable.

startTime Optional

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

Return value

The PerformanceMark entry that was created.

Exceptions

Examples

Creating named markers

The following example uses mark() to create named PerformanceMark entries. You can create several marks with the same name. You can also assign them, to have a reference to the PerformanceMark object that has been created.

js

performance.mark("login-started");
performance.mark("login-started");
performance.mark("login-finished");
performance.mark("form-sent");

const videoMarker = performance.mark("video-loaded");

Creating markers with details

The performance mark is configurable using the markOptions object where you can put additional information in the detail property, which can be of any type.

js

performance.mark("login-started", {
  detail: "Login started using the login button in the top menu.",
});

performance.mark("login-started", {
  detail: { htmlElement: myElement.id },
});

Creating markers with a different start time

The default timestamp of the mark() method is performance.now(). You can set it to a different time using the startTime option in markOptions.

js

performance.mark("start-checkout", {
  startTime: 20.0,
});

performance.mark("login-button-pressed", {
  startTime: myEvent.timeStamp,
});

Reserved names

Note in order to maintain backwards compatibility, names that are part of the deprecated PerformanceTiming interface can't be used. The following example throws:

js

performance.mark("navigationStart");
// SyntaxError: "navigationStart" is part of
// the PerformanceTiming interface,
// and cannot be used as a mark name

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
mark 2825–28 12 38 10 33 11 4.4 2825–28 42 33 11 1.5
markOptions_parameter 78 79 101 No 65 14.1 78 78 101 56 14.5 12.0
returns_performancemark 78 79 101 No 65 14.1 78 78 101 56 14.5 12.0

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark