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 2017.
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
startTimeto the next rendering paint (rounded to the nearest 8ms). first-input-
The time from the first input event's
startTimeto 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
loadEventEndandstartTimeproperties. resource-
The entry's
responseEndvalue minus the entry'sstartTimevalue.
For the following entry types, duration is not applicable, and in this case the value is always 0:
elementlargest-contentful-paintlayout-shiftmarkpainttaskattributionvisibility-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
Loading…