Performance: mark() method
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
BCD tables only load in the browser