PerformanceEntry: startTime property
The read-only startTime
property returns the first timestamp recorded for this performance entry. The meaning of this property depends on the value of this entry's entryType
.
Value
A DOMHighResTimeStamp
representing the first timestamp when the
performance entry
was created.
The meaning of this property depends on the value of this performance entry's entryType
:
element
-
Either the value of this entry's
renderTime
if it is not0
, otherwise the value of this entry'sloadTime
. event
-
The time the event was created, i.e. the event's
timeStamp
property. first-input
-
The time the first input event was created, i.e. that event's
timeStamp
. largest-contentful-paint
-
The value of this entry's
renderTime
if it is not0
, otherwise the value of this entry'sloadTime
. layout-shift
-
The time when the layout shift started.
longtask
-
The time when the task started.
mark
-
The time at which the mark was created by a call to
performance.mark()
. measure
-
The time at which the measure was created by a call to
performance.measure()
. -
Always
0
. paint
-
The time when the paint occurred.
resource
-
The value of this entry's
fetchStart
property. taskattribution
-
Always
0
. visibility-state
-
The time when the visibility state change occurred.
Examples
Using the startTime property
The following example shows the use of the startTime
property which you can log during performance observation.
Note: The performance.mark()
method allows you to set your own startTime
, and the performance.measure()
method allows to set the start of the measure.
performance.mark("my-mark");
performance.mark("my-other-mark", { startTime: 12.5 });
loginButton.addEventListener("click", (clickEvent) => {
performance.measure("login-click", { start: clickEvent.timeStamp });
});
function perfObserver(list, observer) {
list.getEntries().forEach((entry) => {
if (entry.entryType === "mark") {
console.log(`${entry.name}'s startTime: ${entry.startTime}`);
}
if (entry.entryType === "measure") {
console.log(`${entry.name}'s duration: ${entry.duration}`);
}
});
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });
Specifications
Specification |
---|
Performance Timeline # dom-performanceentry-starttime |
Browser compatibility
BCD tables only load in the browser