概念與用法
為了確保 Web 應用程式的快速執行,衡量和分析各種效能指標非常重要。效能 API 提供了重要的內建指標,並允許您將自己的測量新增到瀏覽器的效能時間線中。效能時間線包含高精度的時間戳,並可以在開發者工具中顯示。您還可以將資料傳送到分析端點,以便隨時間記錄效能指標。
每個效能指標都由一個單獨的 PerformanceEntry 物件表示。效能條目具有 name、duration、startTime 和 type 屬性。所有效能指標都繼承自 PerformanceEntry 介面並對其進行進一步限定。
大多數效能條目會在您不進行任何操作的情況下自動記錄,然後可以透過 Performance.getEntries() 或(更推薦)透過 PerformanceObserver 訪問。例如,對於執行時間超過設定閾值的事件,會記錄 PerformanceEventTiming 條目。但效能 API 也允許您使用 PerformanceMark 和 PerformanceMeasure 介面來定義和記錄自己的自定義事件。
主要的 Performance 介面在 Window 和 Worker 全域性作用域中都可用,它允許您新增自定義效能條目、清除效能條目以及檢索效能條目。
PerformanceObserver 介面允許您在各種型別的效能條目被記錄時監聽它們。
有關更多概念性資訊,請參閱下面的 效能 API 指南。
參考
效能 API 中包含以下介面:
EventCounts-
由
performance.eventCounts返回的只讀對映,包含按事件型別分派的事件數量。 LargestContentfulPaint-
衡量視口內可見的最大影像或文字塊的渲染時間,記錄從頁面首次開始載入時算起。
LayoutShift-
提供對網頁佈局穩定性的洞察,基於頁面上元素的移動。
LayoutShiftAttribution-
提供有關已移動元素的除錯資訊。
NotRestoredReasonDetails-
表示頁面因某個原因而無法使用後退/前進快取(bfcache)的單個原因。
NotRestoredReasons-
提供報告資料,包含當前文件在導航時被阻止使用後退/前進快取(bfcache)的原因。
效能-
訪問效能測量的主介面。透過
Window.performance或WorkerGlobalScope.performance在視窗和 worker 上下文中可用。 PerformanceElementTiming-
測量特定元素的渲染時間戳。
PerformanceEntry-
效能時間線上的一個條目,封裝了單個性能指標。所有效能指標都繼承自此介面。
PerformanceEventTiming-
測量事件和下次繪製互動(INP)的延遲。
PerformanceLongAnimationFrameTiming-
提供有關佔用渲染並阻止其他任務執行的長動畫幀(LoAFs)的指標。
PerformanceLongTaskTiming-
提供有關佔用渲染並阻止其他任務執行的長任務的指標。
PerformanceMark-
自定義標記,用於您在效能時間線上的自定義條目。
PerformanceMeasure-
在兩個效能條目之間進行自定義時間測量。
-
測量文件導航事件,例如載入文件所需的時間。
PerformanceObserver-
監聽效能時間線中新記錄的效能條目。
PerformanceObserverEntryList-
效能觀察器觀察到的條目列表。
PerformancePaintTiming-
測量網頁構建過程中的渲染操作。
PerformanceResourceTiming-
測量網路載入指標,例如影像、指令碼、fetch 呼叫等資源的重定向開始和結束時間、fetch 開始時間、DNS 解析開始和結束時間、響應開始和結束時間。
PerformanceScriptTiming-
提供導致長動畫幀(LoAFs)的單個指令碼的指標。
PerformanceServerTiming-
暴露隨響應一起傳送的伺服器指標,這些指標位於
Server-TimingHTTP 頭部中。 TaskAttributionTiming-
識別任務型別以及負責長任務的容器。
VisibilityStateEntry-
測量頁面可見性狀態更改的時間,即選項卡從前臺變為後臺或反之亦然的時間。
指南
以下指南將幫助您理解效能 API 的關鍵概念並概述其功能: