Frame Timing API - Web API 接口参考 编辑

性能 frames

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

该PerformanceFrameTiming界面提供有关浏览器事件循环的帧计时数据。一帧表示浏览器在一个事件循环迭代中所做的工作量，例如处理DOM事件，调整大小，滚动，渲染，CSS动画等。60Hz刷新速率的帧率为60 fps（每秒帧），良好响应用户体验的共同目标。这意味着浏览器应在大约16.7毫秒内处理一个帧。

应用程序可以为“frame”性能条目类型 注册 PerformanceObserver。当新的“frame”事件添加到浏览器的性能时间轴并且框架的持续时间（时间长度）可用时，将通知观察者（回调）。此数据可用于帮助识别需要太长时间才能提供良好用户体验的区域。

本文档中描述的接口的示例代码包含在“使用帧定时API”中。

The PerformanceFrameTiming interface extends the following PerformanceEntry properties (for "frame" performance entry types) by qualifying and constrainting the properties as follows:

PerformanceEntry.entryType

Set to "frame".

PerformanceEntry.name

Set to the document's address.

PerformanceEntry.startTime

Set to the DOMHighResTimeStamp when the frame was started.

PerformanceEntry.duration

Set to a timestamp indicating the difference between the startTimes of two successive frames.

This data, particularly the duration timestamp, can be used to help identify performance problems.

Frame observers

The performance observer interfaces allow an application to register an observer for specific 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 PerformanceObserver object with a specific frame observer callback (function). Next, 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.

Accessing frame data

调用框架观察者时，可以通过调用PerformanceObserverEntryList.getEntriesByType()，参数为” frame“。此方法返回一个“ frame” PerformanceEntry对象的列表。每个帧对象的duration属性返回两个连续帧的时间戳。如果此值大于提供良好用户体验所需的时间，则可能需要进一步分析。

浏览器兼容性

如PerformanceFrameTiming界面的“ 浏览器兼容性”表中所示，此界面没有任何实现。

也可以看看

• 帧速率（Firefox性能工具）
• 使用帧计时API