Frame Timing API - 提供有关浏览器事件循环的帧计时数据

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

PerformanceFrameTiming 是一个抽象接口,提供有关浏览器事件循环的计时数据。一个表示浏览器在一个事件循环中的工作量,例如处理 DOM 事件,调整大小,滚动,渲染,CSS 动画等。具有 60Hz 刷新率的 60fps(每秒帧数)的帧速率是获得良好响应用户体验的目标。这意味着浏览器应在大约 16.7
毫秒内处理一个帧。

应用程序可以为 “frame性能条目类型 注册 PerformanceObserver。当新的 “frame” 事件添加到浏览器的性能时间线并且帧的 duration(时间长度)可用时,观察者(回调)将收到通知。此信息可用于帮助确定需要太长时间才能提供良好用户体验的区域。

本文档中描述的接口实例代码包含在 使用帧时序 API 中。

frames 性能

PerformanceFrameTiming 但是通过如下限定和约束属性来扩展以下的 PerformanceEntry 属性(针对 frame 性能条目类型):

PerformanceEntry.entryType

返回 “frame”。

PerformanceEntry.name

返回文档的地址

PerformanceEntry.startTime

返回当帧开始时的 timestamp

PerformanceEntry.duration

返回一个 timestamp,指示两个连续帧的 startTime 之间的差异。

这些数据,尤其是 duration 时间戳,可用于帮助识别性能问题。

帧观察者

性能观察者接口允许应用程序为特定的 性能事件类型 注册一个观察者。当这类事件被记录在浏览器的性能时间线时,应用程序会通过在创建观察者时指定的观察者回调函数收到事件通知。

要观察 “frame” 性能条目类型,应用程序首先创建一个带有特定帧观察器回调(函数)的 PerformanceObserver 对象。接下来,PerformanceObserver.observe() 用于指定要观察的性能事件集 - 在这种情况下,只要指定 “frame” 事件类型。当浏览器向性能时间线添加新帧时,将调用指定的观察者回调。

访问帧数据

当调用帧的 observer 时,可以通过调用 PerformanceObserverEntryList.getEntriesByType(),指定参数为 “frame” 来来检索帧的性能条目。此方法返回 “frame” 的 PerformanceEntry 对象的列表。每个帧对象的 duration 属性返回两个连续帧的时间戳。如果此值大于提供良好用户体验所需的时间,则可能需要进一步分析。

浏览器兼容性

PerformanceFrameTiming 接口的浏览器兼容性表所示,该接口没有实现。

相关链接