PerformanceLongAnimationFrameTiming

描述

长时间动画帧（LoAF）是指延迟超过 50ms 的渲染更新。LoAF 可能导致用户界面 (UI) 更新缓慢，使控件显得无响应，并导致 卡顿（不流畅）的动画效果和滚动。这常常会使用户感到沮丧。

PerformanceLongAnimationFrameTiming 接口提供了关于 LoAF 的以下细粒度信息集，使开发人员能够缩小其根本原因：

• 每个 LoAF 的详细时间戳集。
• 通过 PerformanceLongAnimationFrameTiming.scripts 属性，可以获得有关导致 LoAF 的每个脚本的详细信息。此属性返回一个 PerformanceScriptTiming 对象的数组，每个脚本对应一个对象。

PerformanceLongAnimationFrameTiming 继承自 PerformanceEntry。

实例属性

此接口扩展了以下 PerformanceEntry 属性，用于长时间动画帧性能条目：

PerformanceEntry.duration 只读 实验性

返回一个 DOMHighResTimeStamp，表示处理整个 LoAF 所花费的毫秒数。

PerformanceEntry.entryType 只读 实验性

返回条目类型，始终为 "long-animation-frame"。

PerformanceEntry.name 只读 实验性

返回条目名称，始终为 "long-animation-frame"。

PerformanceEntry.startTime 只读 实验性

返回一个 DOMHighResTimeStamp，表示动画帧开始的时间。

此接口还支持以下属性：

PerformanceLongAnimationFrameTiming.blockingDuration 只读 实验性

返回一个 DOMHighResTimeStamp，表示主线程因阻塞而无法响应高优先级任务（如用户输入）的总毫秒数。其计算方法为：将 LoAF 内所有 duration 大于 50ms 的 长时间任务，从每个任务的 duration 中减去 50ms，将渲染时间加到最长任务时间上，然后将结果相加。

PerformanceLongAnimationFrameTiming.firstUIEventTimestamp 只读 实验性

返回一个 DOMHighResTimeStamp，表示当前动画帧期间排队等待的第一个 UI 事件（如鼠标或键盘事件）的时间。

PerformanceLongAnimationFrameTiming.renderStart 只读 实验性

返回一个 DOMHighResTimeStamp，表示渲染周期的开始时间，其中包括 Window.requestAnimationFrame() 回调、样式和布局计算、ResizeObserver 回调以及 IntersectionObserver 回调。

PerformanceLongAnimationFrameTiming.scripts 只读 实验性

返回一个 PerformanceScriptTiming 实例的数组。

PerformanceLongAnimationFrameTiming.styleAndLayoutStart 只读 实验性

返回一个 DOMHighResTimeStamp，表示当前动画帧中用于样式和布局计算的时间段的开始时间。

实例方法

PerformanceLongAnimationFrameTiming.toJSON() 实验性

返回 PerformanceLongAnimationFrameTiming 对象的 JSON 表示形式。

示例

有关 Long Animation Frames API 的示例，请参阅 长动画帧计时。

规范

浏览器兼容性

另见

• 长动画帧计时
• PerformanceScriptTiming