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
|
---
title: Frame Timing API
slug: Web/API/Frame_Timing_API
translation_of: Web/API/Frame_Timing_API
---
<div>{{DefaultAPISidebar("Frame Timing API")}} {{SeeCompatTable}}</div>
<p>该<strong><code>PerformanceFrameTiming</code></strong>界面提供有关浏览器事件循环的<em>帧</em>计时数据。一<em>帧</em>表示浏览器在<a href="https://html.spec.whatwg.org/multipage/webappapis.html#processing-model-8">一个事件循环迭代</a>中所做的工作量，例如处理DOM事件，调整大小，滚动，渲染，CSS动画等。60Hz刷新速率的<em>帧率</em>为60 fps（每秒帧），良好<em>响应</em>用户体验的共同目标。这意味着浏览器应在大约16.7毫秒内处理一个帧。</p>
<p>应用程序可以为“<code>frame</code>”{{domxref("PerformanceEntry","性能条目类型")}} 注册 {{domxref("PerformanceObserver")}}。当新的“<code>frame</code>”事件添加到浏览器的<em>性能时间轴</em>并且框架的{{domxref("PerformanceEntry.duration","持续时间")}}（时间长度）可用时，将通知<em>观察者</em>（回调）。此数据可用于帮助识别需要太长时间才能提供良好用户体验的区域。</p>
<p>本文档中描述的接口的示例代码包含在“<em><a href="/Web/API/Frame_Timing_API/Using_the_Frame_Timing_API">使用帧定时API”</a><a></a></em><a>中。</a></p><a>
<h2 id="性能_frames">性能 <code>frames</code></h2>
<p>The {{domxref("PerformanceFrameTiming")}} interface extends the following {{domxref("PerformanceEntry")}} properties (for "<code>frame</code>" {{domxref("PerformanceEntry.entryType","performance entry types")}}) by qualifying and constrainting the properties as follows:</p>
</a><dl><a>
<dt>{{domxref("PerformanceEntry.entryType")}}</dt>
<dd>Set to "<code>frame</code>".</dd>
<dt>{{domxref("PerformanceEntry.name")}}</dt>
</a><dd><a>Set to the </a><a href="https://dom.spec.whatwg.org/#concept-document-url">document's address</a>.</dd>
<dt>{{domxref("PerformanceEntry.startTime")}}</dt>
<dd>Set to the {{domxref("DOMHighResTimeStamp")}} when the frame was started.</dd>
<dt>{{domxref("PerformanceEntry.duration")}}</dt>
<dd>Set to a {{domxref("DOMHighResTimeStamp","timestamp")}} indicating the difference between the <code>startTime</code>s of two successive frames.</dd>
</dl>
<p>This data, particularly the <code>duration</code> timestamp, can be used to help identify performance problems.</p>
<h2 id="Frame_observers">Frame observers</h2>
<p>{{experimental_inline}}The <em>performance observer</em> interfaces allow an application to register an <em>observer</em> for specific {{domxref("PerformanceEntry","performance event types")}}. When one of those event types is recorded in the browser's <em>performance timeline</em>, the application is notified of the event via the observer's callback function that was specified when the observer was created.</p>
<p>To observe "<code>frame</code>" performance entry types, the application first creates a {{domxref("PerformanceObserver")}} object with a specific frame observer callback (function). Next, {{domxref("PerformanceObserver.observe()")}} is used to specify the set of performance events to observe - in this case, just the "<code>frame</code>" event type. When the browser adds a new frame to the performance timeline, the specified observer callback will be invoked.</p>
<h2 id="Accessing_frame_data">Accessing frame data</h2>
<p>调用框架{{domxref("PerformanceObserver","观察者")}}时，可以通过调用{{domxref("PerformanceObserverEntryList.getEntriesByType()")}}，参数为” <code>frame</code>“。此方法返回一个“ <code>frame</code>” {{domxref("PerformanceEntry")}}对象的列表。每个帧对象的{{domxref("PerformanceEntry.duration","duration")}}属性返回两个连续帧的时间戳。如果此值大于提供良好用户体验所需的时间，则可能需要进一步分析。</p>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{experimental_inline}}如{{domxref("PerformanceFrameTiming")}}界面的“ <a href="/Web/API/PerformanceFrameTiming#Browser_compatibility">浏览器兼容性”</a>表中所示，此界面没有任何实现。</p>
<h2 id="也可以看看">也可以看看</h2>
<ul>
<li><a href="/docs/Tools/Performance/Frame_rate">帧速率（Firefox性能工具）</a></li>
<li><a href="/Web/API/Frame_Timing_API/Using_the_Frame_Timing_API">使用帧计时API</a></li>
</ul>
|
