Performance: mark() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.
Note: This feature is available in Web Workers.
The mark()
method creates a named PerformanceMark
object representing a high resolution timestamp marker in the browser's performance timeline.
Syntax
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 toperformance.now()
.
Return value
The PerformanceMark
entry that was created.
Exceptions
SyntaxError
: Thrown if thename
is one of the properties of the deprecatedPerformanceTiming
interface. See the example below.TypeError
: Thrown ifstartTime
is negative.
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.
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.
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
.
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:
performance.mark("navigationStart");
// SyntaxError: "navigationStart" is part of
// the PerformanceTiming interface,
// and cannot be used as a mark name
Specifications
Specification |
---|
User Timing> # dom-performance-mark> |
Browser compatibility
Loading…