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

前端性能統計必備api，有不知道的嗎？

正文從這開始～

開發一個現代化的互聯網網站是一項複雜的任務，須要各類職能的密切合做以應對用戶突飛猛進的需求。其中，網頁的性能直接決定了用戶的體驗，而隨着新型客戶端瀏覽設備的出現與網站功能的日益複雜化，對於性能的專一也達到了史無前例的高度。

傳統的網站性能監測一般有如下幾種方式：

藉助傳統的開發者工具查看網絡請求，例如瀏覽器的F12工具、Fiddler、Charles等等。基本方式是經過追蹤HTTP請求與響應的時間，以圖形的方式列出全部資源的下載狀況。這種方式依賴於人爲操做，難以實現批量測試與統計。

使用侵入式的JavaScript代碼檢測DOM事件的發生時間。例如DOMContentLoaded和document.onreadystatechange等等。這種方式會在頁面中引入額外的代碼，加劇了開發者與測試人員的負擔，還有可能由於檢測代碼自己的潛在問題影響頁面的性能。

使用第三方的服務與工具，例如WebPagetest、Pingdom等等，這些服務一般可以實如今不一樣瀏覽器和不一樣地域進行測試，而且爲用戶提供一些優化建議。但某些服務須要排隊等待，而且屢次測試結果之間每每區別較大。第一條方式的問題也一樣存在。

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

W3C Web性能工做小組與各瀏覽器廠商都已認識到性能對於web開發的重要性，爲了解決當前性能測試的困難，W3C推出了一套性能API標準，各類瀏覽器對這套標準的支持現在也逐漸成熟起來。這套API的目的是簡化開發者對網站性能進行精確分析與控制的過程，最終實現性能的提升。其中還包括了一些新協議與HTML元素的提議，目的是讓內容的展示更快、更加優化。

性能API示例

整套標準包含了10餘種API，各自針對性能檢測的某個方面。爲了保證整套標準的質量與互操做性，W3C按照慣例對它們應用了規範成熟度流程，這些API各自處於流程的不一樣階段。在下圖中能夠看到它們當前的進展：

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

Navigation Timing （導航計時）

NavigationTiming API可以幫助網站開發者檢測真實用戶數據（RUM），例如帶寬、延遲或主頁的總體頁面加載時間。開發者能夠用如下JavaScript代碼檢測頁面的性能：須要注意的是，Navigation Timing的目的是用於分析頁面總體性能指標。若是要獲取個別資源（例如JS、圖片）的性能指標，請使用Resource Timing API。

W3C剛剛宣佈了NavigationTiming 2，它將替代以前的版本。

High Resolution Timing（高精度計時）

該API規範所定義的JavaScript接口可以提供精確到微秒級的當前時間，而且不會受到系統時鐘誤差或調整的影響。對於性能分析來講，精確的測量結果意義重大。

Page Visibility （頁面可見性）

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

當頁面得到或失去焦點時，文檔對象的visibilitychange事件便會被觸發。這一事件對於瞭解頁面的可見狀態十分有用，舉例來講，用戶可能會同時打開多個瀏覽器標籤，而你但願只在用戶顯示你的網站頁面時才進行某些操做（好比播放一段音頻文件、或是執行一段JavaScript動畫），就能夠經過這一事件進行觸發。對於移動設備來講，若是用戶在某個標籤中打開了你的網站，但正在另外一個標籤中瀏覽其它內容時，這一特性可以節省該設備的電池消耗。（雖然對於你的網站性能來講意義不大……）

其它部分API功能簡介

Resource Timing（資源計時）——對單個資源（如圖片）的計時，能夠對細粒度的用戶體驗進行檢測。

Performance Timeline（性能時間線）——以一個統一的接口獲取由Navigation Timing、Resourcing Timing和User Timing所收集的性能數據。

BatteryStatus（電池狀態）——可以檢測當前設備的電池狀態，例如是否正在充電、電量等級等等。能夠根據當前電量決定是否顯示某些內容（例如視頻、動畫等等），對於移動設備來講很是實用。

User Timing（用戶計時）——能夠對某段代碼、函數進行自定義計時，以瞭解這段代碼的具體運行時間，相似於stop watch的做用。

Beacon（燈塔）——能夠將分析結果或診斷代碼發送給服務器，它採用了異步執行的方式，所以不會影響頁面中其它代碼的運行。對於收集測試結果並進行統計分析來講是一種十分便利的工具。

Animation Timing（動畫計時） - 經過requestAnimationFrame函數讓瀏覽器精通地控制動畫的幀數，可以有效地配合顯示器的刷新率，提供更平滑的動畫效果，減小對CPU和電池的消耗。

Resource Hits（資源提示） - 經過html屬性指定資源的預加載，例如在瀏覽相冊時可以預先加載下一張圖片，加快翻頁的顯示速度。

Frame Timing（幀計時）——經過一個接口獲取與幀相關的性能數據，例如每秒幀數和TTF。該標準目前還沒有被支持。

NavigationError Logging（導航錯誤日誌記錄）——經過一個接口存儲及獲取與某個文檔的導航相關的錯誤記錄。該標準目前還沒有被支持。