Web性能API——幫你分析Web前端性能

開發一個現代化的互聯網網站是一項複雜的任務，需要各種職能的密切合作以應對用戶日新月異的需求。其中，網頁的性能直接決定了用戶的體驗，而隨著新型用戶端流覽設備的出現與網站功能的日益複雜化，對於性能的專注也達到了前所未有的高度。

傳統的網站性能監測通常有以下幾種方式：

‧借助傳統的開發者工具查看網路請求。基本方式是通過追蹤HTTP請求與回應的時間，以圖形的方式列出所有資源的下載情況。這種方式依賴于人為操作，難以實現批量測試與統計。
‧使用侵入式的JavaScript代碼檢測DOM事件的發生時間。這種方式會在頁面中引入額外的代碼，加重了開發者與測試人員的負擔，還有可能因為檢測代碼 本身的潛在問題影響頁面的性能。
‧使用第三方的服務與工具，這些服務通常能夠實現在不同流覽器和不同地域進行測試，並且為用戶提供一些優化建議。但某些服務需要排隊等待，並且多次測試結果之間往往區別較大。第一條方式的問題也同樣存在。

除此之外，以上各種方式的測量指標都比較單一，基本只能起到計時和流量計算的作用。對於其他一些指標，例如電池狀態等無能為力。並且難以實現自動化，以及在持續集成流程中統計測試結果。

W3C Web性能工作小組與各流覽器廠商都已認識到性能對於web開發的重要性，為了解決當前性能測試的困難，推出了一套性能API標準，各種流覽器對這套標準的支援如今也逐漸成熟起來。

這套API的目的是簡化開發者對網站性能進行精確分析與控制的過程，最終實現性能的提高。其中還包括了一些新協定與HTML元素的提議，目的是讓內容的展現更快、更加優化。

性能API示例

整套標準包含了10餘種API，各自針對性能檢測的某個方面。為了保證整套標準的品質與互操作性，這些API各自處於流程的不同階段。

以下將通過簡單的示例介紹目前已屬於W3C推薦標準（REC）的三個API。

Navigation Timing （導航計時）

能夠幫助網站開發者檢測真實用戶資料（RUM），例如帶寬、延遲或主頁的整體頁面載入時間。
需要注意的是，Navigation Timing的目的是用於分析頁面整體性能指標。如果要獲取個別資源（例如JS、圖片）的性能指標，請使用Resource Timing API。

High Resolution Timing（高精度計時）

該API規範所定義的JavaScript介面能夠提供精確到微秒級的當前時間，並且不會受到系統時鐘偏差或調整的影響。對於性能分析來說，精確的測量結果意義重大。

Page Visibility （頁面可見性）

通過這一規範，網站開發者能夠以編程方式確定頁面的當前可見狀態，從而使網站能夠更有效地利用電源與CPU。

當頁面獲得或失去焦點時，文檔物件的visibilitychange事件便會被觸發。

這一事件對於瞭解頁面的可見狀態十分有用，舉例來說，用戶可能會同時打開多個流覽器標籤，而你希望只在用戶顯示你的網站頁面時才進行某些操作（比如播放一段音頻檔、或是執行一段JavaScript動畫），就可以通過這一事件進行觸發。對於移動設備來說，如果用戶在某個標籤中打開了你的網站，但正在另一個標籤中流覽其他內容時，這一特性能夠節省該設備的電池消耗。

如果想瞭解有關Web性能API的更多內容，可以參考W3C官方文檔。