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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
---
title: API de Desempenho
slug: Web/API/Performance_API
translation_of: Web/API/Performance_API
original_slug: Web/API/API_de_Desempenho
---
<div>{{DefaultAPISidebar("High Resolution Time")}}</div>
<p>The <a href="https://www.w3.org/TR/hr-time/">High Resolution Time</a> standard defines a {{domxref("Performance")}} interface that supports client-side latency measurements within applications. The {{domxref("Performance")}} interfaces are considered <em>high resolution</em> because they are accurate to a thousandth of a millisecond (subject to hardware or software constraints). The interfaces support a number of use cases including calculating frame-rates (potentially important in animations) and benchmarking (such as the time to load a resource).</p>
<p>Since a platform's <em>system clock</em> is subject to various <em>skews</em> (such as NTP adjustments), the interfaces support a <em>monotonic clock</em> i.e. a clock that is always increasing. As such, the <code>Performance</code> API defines a {{domxref("DOMHighResTimeStamp")}} type rather than using the {{jsxref("Date.now","Date.now()")}} interface.</p>
<h2 id="DOMHighResTimeStamp">DOMHighResTimeStamp</h2>
<p>The {{domxref("DOMHighResTimeStamp")}} type, as its name implies, represents a high resolution point in time. This type is a <code>double</code> and is used by the performance interfaces. The value could be a discrete point in time or the difference in time between two discrete points in time.</p>
<p>The unit of <code>DOMHighResTimeStamp</code> is milliseconds and should be accurate to 5 µs (microseconds). However, If the browser is unable to provide a time value accurate to 5 microseconds (because, for example, due to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond.</p>
<h2 id="Methods">Methods</h2>
<p>The <code>{{domxref("Performance")}}</code> interface has two methods. The {{domxref("Performance.now","now()")}} method returns a {{domxref("DOMHighResTimeStamp")}} whose value that depends on the {{domxref("PerformanceTiming.navigationStart","navigation start")}} and scope. If the scope is a window, the value is the time the browser context was created and if the scope is a {{domxref("Worker","worker")}}, the value is the time the worker was created.</p>
<p>The {{domxref("Performance.toJSON","toJSON()")}} method returns a serialization of the {{domxref("Performance")}} object, for those attributes that can be serialized.</p>
<h2 id="Properties">Properties</h2>
<p>The <code>{{domxref("Performance")}}</code> interface has two properties. The {{domxref("Performance.timing","timing")}} property returns a {{domxref("PerformanceTiming")}} object containing latency-related performance information such as the start of navigation time, start and end times for redirects, start and end times for responses, etc.</p>
<p>The <code>{{domxref("Performance.navigation","navigation")}}</code> property returns a {{domxref("PerformanceNavigation")}} object representing the type of navigation that occurs in the given browsing context, such as the page was navigated to from history, the page was navigated to by following a link, etc.</p>
<h2 id="Interfaces">Interfaces</h2>
<dl>
<dt>{{domxref('Performance')}}</dt>
<dd>Provides methods and properties containing timing-related performance information for the given page.</dd>
<dt>{{domxref('PerformanceEntry')}}</dt>
<dd>Provides methods and properties the encapsulate a single performance metric that is part of the performance timeline.</dd>
<dt>{{domxref('PerformanceFrameTiming')}}</dt>
<dd>Provides methods and properties containing frame timing data about the browser's event loop.</dd>
<dt>{{domxref('PerformanceMark')}}</dt>
<dd>An abstract interface for <a href="/en-US/docs/Web/API/PerformanceEntry"><code>performance entries</code></a> with an <a href="/en-US/docs/Web/API/PerformanceEntry/entryType"><code>entry type</code></a> of "<code>mark</code>". Entries of this type are created by calling <a href="/en-US/docs/Web/API/Performance/mark"><code>performance.mark()</code></a> to add a named <a href="/en-US/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> (the mark) to the browser's performance timeline.</dd>
<dt>{{domxref('PerformanceMeasure')}}</dt>
<dd>An abstract interface for <a href="/en-US/docs/Web/API/PerformanceEntry"><code>performance entries</code></a> with an <a href="/en-US/docs/Web/API/PerformanceEntry/entryType"><code>entry type</code></a> of "<code>measure</code>". Entries of this type are created by calling <a href="/en-US/docs/Web/API/Performance/measure"><code>performance.measure()</code></a> to add a named<a href="/en-US/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> (the measure) between two marks to the browser's performance timeline.</dd>
<dt>{{domxref('PerformanceNavigationTiming')}}</dt>
<dd>Provides methods and properties to store and retrieve <a href="/en-US/docs/Web/API/DOMHighResTimeStamp"><code>high resolution timestamps</code></a> or metrics regarding the browser's document navigation events.</dd>
<dt>{{domxref('PerformanceObserver')}}</dt>
<dd>Provides methods and properties used to observe performance measurement events and be notified of new <a href="/en-US/docs/Web/API/PerformanceEntry">performance entries</a> as they are recorded in the browser's performance timeline.</dd>
<dt>{{domxref('PerformanceResourceTiming')}}</dt>
<dd>Provides methods and properties for retrieving and analyzing detailed network timing data regarding the loading of an application's resources.</dd>
</dl>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Highres Time')}}</td>
<td>{{Spec2('Highres Time')}}</td>
<td>Initial definition.</td>
</tr>
<tr>
<td>{{SpecName('Highres Time Level 2')}}</td>
<td>{{Spec2('Highres Time Level 2')}}</td>
<td>Adds <code>performance</code> attribute on <code>Window</code> and <code>WorkerGlobalScope</code>.</td>
</tr>
<tr>
<td>{{SpecName('Highres Time Level 3')}}</td>
<td>{{Spec2('Highres Time Level 3')}}</td>
<td>Add <code>timeOrigin</code> property to <code>Performance</code> interface.</td>
</tr>
<tr>
<td>{{SpecName('Frame Timing')}}</td>
<td>{{Spec2('Frame Timing')}}</td>
<td>Adds <code>PerformanceFrameTiming</code> interface.</td>
</tr>
<tr>
<td>{{SpecName('Navigation Timing')}}</td>
<td>{{Spec2('Navigation Timing')}}</td>
<td>Adds the <code>PerformanceTiming</code> and <code>PerformanceNavigation</code> interfaces. Adds <code>timing</code> and <code>navigation</code> properties to the <code>Performance</code> interface.</td>
</tr>
<tr>
<td>{{SpecName('Navigation Timing Level 2')}}</td>
<td>{{Spec2('Navigation Timing Level 2')}}</td>
<td>Adds the <code>PerformanceNavigationTiming</code> interface. Obsolete's the the <code>PerformanceTiming</code> interface, the <code>PerformanceNavigation</code> interface, as well as the <code>timing</code> and <code>navigation</code> properties to the <code>Performance</code> interface.</td>
</tr>
<tr>
<td>{{SpecName('Performance Timeline')}}</td>
<td>{{Spec2('Performance Timeline')}}</td>
<td>Adds the <code>PerformanceEntry</code> interface, the <code>PerformanceEntryList</code> type, as well as the <code>getEntries()</code>, <code>getEntriesByType()</code>, and <code>getEntriesByName()</code> methods on the <code>Performance</code> interface.</td>
</tr>
<tr>
<td>{{SpecName('Performance Timeline Level 2')}}</td>
<td>{{Spec2('Performance Timeline Level 2')}}</td>
<td>Adds serializer to the <code>PerformanceEntry</code> interface as well as adding the <code>PerformanceObserver</code> interface and callback</td>
</tr>
<tr>
<td>{{SpecName('Resource Timing')}}</td>
<td>{{Spec2('Resource Timing')}}</td>
<td>Adds the <code>PerformanceResourceTiming</code> interface. Adds the <code>clearResourceTimings()</code> method, the <code>setResourceTimingBufferSize()</code> method, and the <code>onresourcetimingbufferfull</code> event handler to the <code>Performance</code> interface. Also adds the <code>Timing-Allow-Origin</code> response header.</td>
</tr>
<tr>
<td>{{SpecName('Resource Timing 2')}}</td>
<td>{{Spec2('Resource Timing 2')}}</td>
<td>Adds the <code>nextHopProtocol</code>, <code>workerStart</code>, <code>transferSize</code>, <code>encodedBodySize</code>, and <code>decodedBodySize</code> properties to the <code>PerformanceResourceTiming</code> interface.</td>
</tr>
<tr>
<td>{{SpecName('Resource Timing 3')}}</td>
<td>{{Spec2('Resource Timing 3')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('User Timing')}}</td>
<td>{{Spec2('User Timing')}}</td>
<td>Adds <code>mark()</code>, <code>clearMarks()</code>, <code>measure()</code> and <code>clearMeasures()</code> methods to the <code>Performance</code> interface. Adds the <code>PerformanceMark</code> and <code>PeformanceMeasure</code> interfaces.</td>
</tr>
<tr>
<td>{{SpecName('User Timing Level 2')}}</td>
<td>{{Spec2('User Timing Level 2')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Implementation_status">Implementation status</h2>
<p>As shown in the {{domxref("Performance")}} interface's <a href="/Web/API/Performance#Browser_compatibility">Browser Compatibility</a> table, most of these interfaces are broadly implemented by desktop browsers.</p>
<p>To test your browser's support for the {{domxref("Performance")}} interface, run the <code><a href="http://mdn.github.io/web-performance/perf-api-support.html">perf-api-support</a></code> application.</p>
<h2 id="See_Also">See Also</h2>
<ul>
<li><a href="http://w3c.github.io/perf-timing-primer/">A Primer for Web Performance Timing APIs</a></li>
</ul>
|
