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