PerformanceEntry: duration property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Note: This feature is available in Web Workers.
The read-only duration
property returns a timestamp that is the duration of the performance entry. The meaning of this property depends on the value of this entry's entryType
.
Value
A DOMHighResTimeStamp
representing the duration of the performance entry. If the duration concept doesn't apply for a particular performance metric, a duration of 0
is returned.
The meaning of this property depends on the value of this performance entry's entryType
:
event
-
The time from the event's
startTime
to the next rendering paint (rounded to the nearest 8ms). first-input
-
The time from the first input event's
startTime
to the next rendering paint (rounded to the nearest 8ms). longtask
-
The elapsed time between the start and end of task, with a 1ms granularity.
measure
-
The duration of the measure.
-
The difference between the entry's
loadEventEnd
andstartTime
properties. resource
-
The entry's
responseEnd
value minus the entry'sstartTime
value.
For the following entry types, duration
is not applicable, and in this case the value is always 0
:
element
largest-contentful-paint
layout-shift
mark
paint
taskattribution
visibility-state
Examples
Using the duration property
The following example logs all observed performance entries with a duration
larger than 0
.
function perfObserver(list, observer) {
list.getEntries().forEach((entry) => {
if (entry.duration > 0) {
console.log(`${entry.name}'s duration: ${entry.duration}`);
}
});
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark", "resource"] });
Specifications
Specification |
---|
Performance Timeline # dom-performanceentry-duration |
Browser compatibility
BCD tables only load in the browser