-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
66 lines (50 loc) · 2.42 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
---
title: "PerformanceEntry: duration property"
short-title: duration
slug: Web/API/PerformanceEntry/duration
page-type: web-api-instance-property
browser-compat: api.PerformanceEntry.duration
---
{{APIRef("Performance API")}}
The read-only **`duration`** property returns a {{domxref("DOMHighResTimeStamp","timestamp", "", "no-code")}} that is the duration of the {{domxref("PerformanceEntry","performance entry", "", "no-code")}}. The meaning of this property depends on the value of this entry's {{domxref("PerformanceEntry.entryType", "entryType")}}.
## Value
A {{domxref("DOMHighResTimeStamp")}} representing the duration of the {{domxref("PerformanceEntry","performance entry", "", "no-code")}}. 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 {{domxref("PerformanceEntry.entryType","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.
- `navigation`
- : The difference between the entry's {{domxref("PerformanceNavigationTiming.loadEventEnd", "loadEventEnd")}} and {{domxref("PerformanceEntry.startTime", "startTime")}} properties.
- `resource`
- : The entry's {{domxref("PerformanceResourceTiming/responseEnd", "responseEnd")}} value minus the entry's {{domxref("PerformanceEntry.startTime","startTime")}} 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`.
```js
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
{{Specifications}}
## Browser compatibility
{{Compat}}