The mark()
method creates a named PerformanceMark
object representing a high resolution timestamp marker in the browser's performance timeline.
The mark()
method creates a named PerformanceMark
object representing a high resolution timestamp marker in the browser's performance timeline.
js
mark(name) mark(name, markOptions)
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()
.
The PerformanceMark
entry that was created.
SyntaxError
: Thrown if the name
is one of the properties of the deprecated PerformanceTiming
interface. See the example below.TypeError
: Thrown if startTime
is negative.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");
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 }, });
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, });
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
Specification |
---|
User Timing # dom-performance-mark |
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