--- title: Frame Timing API slug: Web/API/Frame_Timing_API translation_of: Web/API/Frame_Timing_API ---
该PerformanceFrameTiming
界面提供有关浏览器事件循环的帧计时数据。一帧表示浏览器在一个事件循环迭代中所做的工作量,例如处理DOM事件,调整大小,滚动,渲染,CSS动画等。60Hz刷新速率的帧率为60 fps(每秒帧),良好响应用户体验的共同目标。这意味着浏览器应在大约16.7毫秒内处理一个帧。
应用程序可以为“frame
”{{domxref("PerformanceEntry","性能条目类型")}} 注册 {{domxref("PerformanceObserver")}}。当新的“frame
”事件添加到浏览器的性能时间轴并且框架的{{domxref("PerformanceEntry.duration","持续时间")}}(时间长度)可用时,将通知观察者(回调)。此数据可用于帮助识别需要太长时间才能提供良好用户体验的区域。
frames
The {{domxref("PerformanceFrameTiming")}} interface extends the following {{domxref("PerformanceEntry")}} properties (for "frame
" {{domxref("PerformanceEntry.entryType","performance entry types")}}) by qualifying and constrainting the properties as follows:
frame
".startTime
s of two successive frames.This data, particularly the duration
timestamp, can be used to help identify performance problems.
{{experimental_inline}}The performance observer interfaces allow an application to register an observer for specific {{domxref("PerformanceEntry","performance event types")}}. When one of those event types is recorded in the browser's performance timeline, the application is notified of the event via the observer's callback function that was specified when the observer was created.
To observe "frame
" 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 "frame
" event type. When the browser adds a new frame to the performance timeline, the specified observer callback will be invoked.
调用框架{{domxref("PerformanceObserver","观察者")}}时,可以通过调用{{domxref("PerformanceObserverEntryList.getEntriesByType()")}},参数为” frame
“。此方法返回一个“ frame
” {{domxref("PerformanceEntry")}}对象的列表。每个帧对象的{{domxref("PerformanceEntry.duration","duration")}}属性返回两个连续帧的时间戳。如果此值大于提供良好用户体验所需的时间,则可能需要进一步分析。
{{experimental_inline}}如{{domxref("PerformanceFrameTiming")}}界面的“ 浏览器兼容性”表中所示,此界面没有任何实现。