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
145
146
147
|
---
title: Performance API
slug: Web/API/Performance_API
tags:
- web性能
- 性能
translation_of: Web/API/Performance_API
---
<div>{{DefaultAPISidebar("High Resolution Time")}}</div>
<p><a href="https://www.w3.org/TR/hr-time/">高时间采样率</a>标准定义了{{domxref("Performance")}}接口，该接口支持应用程序中客户端的延时测量。{{domxref("Performance")}}接口被认为是<em>高采样率</em>的，因为其精确度可达千分之一毫秒（受硬件或软件限制）。这些接口支持许多使用情形，包括计算帧速率（在动画中可能很重要）和基准测试（例如加载资源的时间）。</p>
<p>由于平台的系统时钟会受到各种时滞（例如NTP调整）的影响，该接口支持单调时钟，即一直增加的时钟。 鉴于这个原因，Performance API定义了{{domxref("DOMHighResTimeStamp")}}类型，而不是使用{{jsxref("Date.now","Date.now()")}}接口。</p>
<h2 id="DOMHighResTimeStamp">DOMHighResTimeStamp</h2>
<p>{{domxref("DOMHighResTimeStamp")}}类型，顾名思义，表示高采样率的时间戳。 此类型是 <code>double</code> ，由性能接口使用。 该值可以是离散时间戳，也可以是两个离散时间戳之间的时间间隔。</p>
<p><code>DOMHighResTimeStamp</code> 的单位是毫秒，应精确到5 µs（微秒）。 但是，如果浏览器无法提供精确到5微秒的时间数值（例如由于硬件或软件限制），则浏览器可以将该值表示为精确到毫秒的时间（以毫秒为单位）。</p>
<h2 id="方法">方法</h2>
<p><code>{{domxref("Performance")}}</code> 接口具有两个方法。</p>
<p>{{domxref("Performance.now","now()")}} 方法返回一个{{domxref("DOMHighResTimeStamp")}}，其值取决于{{domxref("PerformanceTiming.navigationStart","navigation start")}}和作用域。如果作用域是window，则值是创建浏览器上下文的时间；如果作用域是{{domxref("Worker","worker")}}，则值是创建worker的时间。</p>
<p>{{domxref("Performance.toJSON","toJSON()")}}方法返回{{domxref("Performance")}}对象的序列化结果，包含可以被序列化的属性。</p>
<h2 id="属性">属性</h2>
<p><code>{{domxref("Performance")}}</code>接口具有两个属性。</p>
<p>{{domxref("Performance.timing","timing")}}属性返回一个{{domxref("PerformanceTiming")}}对象，其中包含与延时相关的性能信息，例如导航开始的时间，重定向的开始时间和结束时间，响应的开始时间和结束时间等。</p>
<p><code>{{domxref("Performance.navigation","navigation")}}</code> 属性返回一个{{domxref("PerformanceNavigation")}}对象，该对象表示在给定浏览上下文中发生的导航类型，例如从历史记录导航到的页面，通过跟随链接导航到的页面等。</p>
<h2 id="接口">接口</h2>
<dl>
<dt>{{domxref('Performance')}}</dt>
<dd>提供方法和属性，包含给定页面与计时相关的性能信息。</dd>
<dt>{{domxref('PerformanceEntry')}}</dt>
<dd>提供方法和属性，将单个性能指标封装为性能时间轴的一部分。</dd>
<dt>{{domxref('PerformanceFrameTiming')}}</dt>
<dd>提供方法和属性，包含有关浏览器事件循环的帧计时数据。</dd>
<dt>{{domxref('PerformanceMark')}}</dt>
<dd>条目类型为"<code>mark</code>"的{{domxref('PerformanceEntry')}}抽象接口，该类型的条目通过调用{{domxref("Performance.mark","mark()")}}将命名的{{domxref("DOMHighResTimeStamp")}}（mark）添加到浏览器的性能时间轴来创建。</dd>
<dt>{{domxref('PerformanceMeasure')}}</dt>
<dd>条目类型为"<code>measure</code>"的{{domxref('PerformanceEntry')}}抽象接口，该类型的条目通过调用{{domxref("Performance.measure","measure()")}}在浏览器的性能时间轴的两个标记之间添加一个命名的{{domxref("DOMHighResTimeStamp")}}（measure）来创建。</dd>
<dt>{{domxref('PerformanceNavigationTiming')}}</dt>
<dd>提供方法和属性，用于存储和检索有关浏览器文档导航事件的<a href="/en-US/docs/Web/API/DOMHighResTimeStamp">高采样率时间戳</a>或其他指标。</dd>
<dt>{{domxref('PerformanceObserver')}}</dt>
<dd>提供方法和属性，用于观察性能测量事件，并在浏览器的性能时间轴中记录新的{{domxref('PerformanceEntry')}}时进行通知。</dd>
<dt>{{domxref('PerformanceResourceTiming')}}</dt>
<dd>提供方法和属性，用于检索和分析有关应用程序资源加载的详细网络计时数据。</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>如{{domxref("Performance")}}接口的“<a href="/Web/API/Performance#Browser_compatibility">浏览器兼容性</a>”表所示，大部分接口由桌面浏览器广泛实现。</p>
<p>要测试你的浏览器对{{domxref("Performance")}}接口的支持，请运行 <code><a href="http://mdn.github.io/web-performance/perf-api-support.html">perf-api-support</a></code> 应用。</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>
|
