Performance APIs

注意:此功能在 Web Workers 中可用。

效能 API 是一組用於衡量 Web 應用程式效能的標準。

概念與用法

為了確保 Web 應用程式的快速執行,衡量和分析各種效能指標非常重要。效能 API 提供了重要的內建指標,並允許您將自己的測量新增到瀏覽器的效能時間線中。效能時間線包含高精度的時間戳,並可以在開發者工具中顯示。您還可以將資料傳送到分析端點,以便隨時間記錄效能指標。

每個效能指標都由一個單獨的 PerformanceEntry 物件表示。效能條目具有 namedurationstartTimetype 屬性。所有效能指標都繼承自 PerformanceEntry 介面並對其進行進一步限定。

大多數效能條目會在您不進行任何操作的情況下自動記錄,然後可以透過 Performance.getEntries() 或(更推薦)透過 PerformanceObserver 訪問。例如,對於執行時間超過設定閾值的事件,會記錄 PerformanceEventTiming 條目。但效能 API 也允許您使用 PerformanceMarkPerformanceMeasure 介面來定義和記錄自己的自定義事件。

主要的 Performance 介面在 WindowWorker 全域性作用域中都可用,它允許您新增自定義效能條目、清除效能條目以及檢索效能條目。

PerformanceObserver 介面允許您在各種型別的效能條目被記錄時監聽它們。

有關更多概念性資訊,請參閱下面的 效能 API 指南

UML diagram of Performance APIs

參考

效能 API 中包含以下介面:

EventCounts

performance.eventCounts 返回的只讀對映,包含按事件型別分派的事件數量。

LargestContentfulPaint

衡量視口內可見的最大影像或文字塊的渲染時間,記錄從頁面首次開始載入時算起。

LayoutShift

提供對網頁佈局穩定性的洞察,基於頁面上元素的移動。

LayoutShiftAttribution

提供有關已移動元素的除錯資訊。

NotRestoredReasonDetails

表示頁面因某個原因而無法使用後退/前進快取(bfcache)的單個原因。

NotRestoredReasons

提供報告資料,包含當前文件在導航時被阻止使用後退/前進快取(bfcache)的原因。

效能

訪問效能測量的主介面。透過 Window.performanceWorkerGlobalScope.performance 在視窗和 worker 上下文中可用。

PerformanceElementTiming

測量特定元素的渲染時間戳。

PerformanceEntry

效能時間線上的一個條目,封裝了單個性能指標。所有效能指標都繼承自此介面。

PerformanceEventTiming

測量事件和下次繪製互動(INP)的延遲。

PerformanceLongAnimationFrameTiming

提供有關佔用渲染並阻止其他任務執行的長動畫幀(LoAFs)的指標。

PerformanceLongTaskTiming

提供有關佔用渲染並阻止其他任務執行的長任務的指標。

PerformanceMark

自定義標記,用於您在效能時間線上的自定義條目。

PerformanceMeasure

在兩個效能條目之間進行自定義時間測量。

PerformanceNavigationTiming

測量文件導航事件,例如載入文件所需的時間。

PerformanceObserver

監聽效能時間線中新記錄的效能條目。

PerformanceObserverEntryList

效能觀察器觀察到的條目列表。

PerformancePaintTiming

測量網頁構建過程中的渲染操作。

PerformanceResourceTiming

測量網路載入指標,例如影像、指令碼、fetch 呼叫等資源的重定向開始和結束時間、fetch 開始時間、DNS 解析開始和結束時間、響應開始和結束時間。

PerformanceScriptTiming

提供導致長動畫幀(LoAFs)的單個指令碼的指標。

PerformanceServerTiming

暴露隨響應一起傳送的伺服器指標,這些指標位於 Server-Timing HTTP 頭部中。

TaskAttributionTiming

識別任務型別以及負責長任務的容器。

VisibilityStateEntry

測量頁面可見性狀態更改的時間,即選項卡從前臺變為後臺或反之亦然的時間。

指南

以下指南將幫助您理解效能 API 的關鍵概念並概述其功能:

規範

規範
Element Timing API
事件計時 API
高精度時間
最大內容繪製
佈局不穩定 API
Long Tasks API
導航計時 Level 2
繪製時序
效能時間線
資源時序
伺服器計時
使用者計時
Long Animation Frames API
記憶體測量 API
HTML
# the-visibilitystateentry-interface
HTML
# the-notrestoredreasons-interface

另見