2015
06
16

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官方文檔。
傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:service@julyinfo.com | 臺北市大安區和平東路3段257號6樓map

© 2016 傑立資訊 All rights reserved.法律顧問:宇恒法律事務所