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
140
141
142
143
144
|
---
title: Performance API
slug: Web/API/Performance_API
tags:
- NeedsContent
- Web パフォーマンス
- ガイド
- パフォーマンス
- 概要
translation_of: Web/API/Performance_API
---
<div>{{DefaultAPISidebar("High Resolution Time")}}</div>
<p><strong>High Resolution Time</strong> 規格は、アプリケーション内でクライアント側の待ち時間測定をサポートする {{domxref("Performance")}} インターフェイスを定義しています。{{domxref("Performance")}} インターフェイスは 1000 分の 1 ミリ秒の精度であるため、高解像度と見なされます (ハードウェアまたはソフトウェアの制約を受けます)。これらのインターフェイスは、フレームレートの計算 (アニメーションでは潜在的に重要) やベンチマーク (リソースのロード時間など) を含む、さまざまな使用例をサポートしています。</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 a the value as a time in milliseconds accurate to a millisecond.</p>
<h2 id="メソッド">メソッド</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="プロパティ">プロパティ</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="インターフェイス">インターフェイス</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="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry" title="The PerformanceEntry object encapsulates a single performance metric that is part of the performance timeline. A performance entry can be directly created by making a performance mark or measure (for example by calling the mark() method) at an explicit point in an application. Performance entries are also created in indirect ways such as loading a resource (such as an image)."><code>performance entries</code></a> with an <a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry/entryType" title="The entryType property returns the performance entry's type. The valid entryType values are:"><code>entry type</code></a> of "<code>mark</code>". Entries of this type are created by calling <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark" title="The mark() method creates a timestamp in the browser's performance entry buffer with the given name. The application defined timestamp can be retrieved by one of the Performance interface's getEntries*() methods (getEntries(), getEntriesByName() or getEntriesByType())."><code>performance.mark()</code></a> to add a named <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp" title="The DOMHighResTimeStamp type is a double and is used to store a time value. The value could be a discrete point in time or the difference in time between two discrete points in time. The unit 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 (due, for example, to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond."><code>DOMHighResTimeStamp</code></a> (the mark) to the browser's performance timeline.</dd>
<dt>{{domxref('PerformanceMeasure')}}</dt>
<dd>An abstract interface for <a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry" title="The PerformanceEntry object encapsulates a single performance metric that is part of the performance timeline. A performance entry can be directly created by making a performance mark or measure (for example by calling the mark() method) at an explicit point in an application. Performance entries are also created in indirect ways such as loading a resource (such as an image)."><code>performance entries</code></a> with an <a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry/entryType" title="The entryType property returns the performance entry's type. The valid entryType values are:"><code>entry type</code></a> of "<code>measure</code>". Entries of this type are created by calling <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/measure" title="The measure() method creates a named timestamp in the browser's performance entry buffer between two specified marks (known as the start mark and end mark, respectively). The named timestamp is referred to as a measure."><code>performance.measure()</code></a> to add a named<a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp" title="The DOMHighResTimeStamp type is a double and is used to store a time value. The value could be a discrete point in time or the difference in time between two discrete points in time. The unit 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 (due, for example, to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond."><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="https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp" title="The DOMHighResTimeStamp type is a double and is used to store a time value. The value could be a discrete point in time or the difference in time between two discrete points in time. The unit 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 (due, for example, to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond."><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="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry" title="The PerformanceEntry object encapsulates a single performance metric that is part of the performance timeline. A performance entry can be directly created by making a performance mark or measure (for example by calling the mark() method) at an explicit point in an application. Performance entries are also created in indirect ways such as loading a resource (such as an image).">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="仕様">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様書</th>
<th scope="col">ステータス</th>
<th scope="col">コメント</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="実装状況">実装状況</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="あわせて参照">あわせて参照</h2>
<ul>
<li><a href="http://w3c.github.io/perf-timing-primer/">A Primer for Web Performance Timing APIs</a></li>
</ul>
|
