使用性能API快速分析web前端性能

mj 發布于2019-08-21 10:48 / 2934人閱讀

摘要：性能時間線以一個統一的接口獲取由和所收集的性能數據。瀏覽器支持下表列舉了當前主流瀏覽器對性能的支持，其中標注星號的內容并非來自于性能工作小組。

頁面的性能問題一直是產品開發過程中的重要一環，很多公司也一直在使用各種方式監控產品的頁面性能。從控制臺工具、Fiddler抓包工具，到使用DOMContentLoaded和document.onreadystatechange這種侵入式javascript代碼方式來檢測DOM事件發生和結束的時間，再到使用第三方工具如WebPagetest、Pingdom等通過在不同的瀏覽器環境和地域進行測試來尋求優化建議等等，這些方式不僅麻煩，而且測量的指標比較單一。如果有一些可以幫我們直接獲取頁面性能信息的API出現，并且成為標準被被瀏覽器廠商支持，那性能監控會不會又是另一幅藍圖？

好在W3C Web性能工作小組與各瀏覽器廠商都已認識到性能對于web開發的重要性，為了解決當前性能測試的困難，W3C推出了一套性能API標準，各種瀏覽器對這套標準的支持如今也逐漸成熟起來。這套API的目的是簡化開發者對網站性能進行精確分析與控制的過程，方便開發者采取手段提高web性能。

整套標準包含了10余種API，各自針對性能檢測的某個方面。在下圖中可以看到它們當前在規范流程中的進展：

下面是API及描述其功能的列表：

API	名稱	功能
Navigation Timing	導航計時	能夠幫助網站開發者檢測真實用戶數據（RUM），例如帶寬、延遲或主頁的整體頁面加載時間。
Resource Timing	資源計時	對單個資源的計時，可以對細粒度的用戶體驗進行檢測。
High Resolution Timing	高精度計時	該API規范所定義的JavaScript接口能夠提供精確到微秒級的當前時間，并且不會受到系統時鐘偏差或調整的影響。
Page Visibility	頁面可見性	通過這一規范，網站開發者能夠以編程方式確定頁面的當前可見狀態，從而使網站能夠更有效地利用電源與CPU。當頁面獲得或失去焦點時，文檔對象的visibilitychange事件便會被觸發。
Performance Timeline	性能時間線	以一個統一的接口獲取由Navigation Timing、Resourcing Timing和User Timing所收集的性能數據。
Battery Status	電池狀態	能夠檢測當前設備的電池狀態，例如是否正在充電、電量等級。可以根據當前電量決定是否顯示某些內容，對于移動設備來說非常實用。
User Timing	用戶計時	可以對某段代碼、函數進行自定義計時，以了解這段代碼的具體運行時間。
Beacon	燈塔	可以將分析結果或診斷代碼發送給服務器，它采用了異步執行的方式，因此不會影響頁面中其它代碼的運行。
Animation Timing	動畫計時	通過requestAnimationFrame函數讓瀏覽器精通地控制動畫的幀數，能夠有效地配合顯示器的刷新率，提供更平滑的動畫效果，減少對CPU和電池的消耗。
Resource Hits	資源提示	通過html屬性指定資源的預加載，例如在瀏覽相冊時能夠預先加載下一張圖片，加快翻頁的顯示速度。
Frame Timing	幀計時	通過一個接口獲取與幀相關的性能數據，例如每秒幀數和TTF。
Navigation Error Logging	錯誤日志記錄	通過一個接口存儲及獲取與某個文檔相關的錯誤記錄。

瀏覽器支持

下表列舉了當前主流瀏覽器對性能API的支持，其中標注星號的內容并非來自于Web性能工作小組。

規范	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android
Navigation Timing	9	31	全部	8	26	8 (不包括 8.1)	4.1
High Resolution Timing	10	31	全部	8	26	8 (不包括 8.1)	4.4
Page Visibility	10	31	全部	7	26	7.1	4.4
Resource Timing	10	34	全部	-	26	-	4.4
Battery Status*	-	31（部分支持）	38	-	26	-	-
User Timing	10	-	全部	-	26	-	4.4
Beacon	-	31	39	-	26	-	-
Animation Timing	10	31	全部	6.1	26	7.1	4.4
Resource Hints	-	-	僅限Canary版	-	-	-	-
Frame Timing	-	-	-	-	-	-	-
Navigation Error Logging	-	-	-	-	-	-	-
WebP*	-	-	全部	-	26	-	4.1
Picture element and srcset attribute *	-	-	38	-	26	-	-

其中有兩個可以幫助我們檢測真實用戶環境下的頁面加載Timing和頁面資源加載Timing: Navigation Timing和Resource Timing。這兩個API非常有用，可以幫助我們獲取頁面的Domready時間、onload時間、白屏時間等，以及單個頁面資源在從發送請求到獲取到rsponse各階段的性能參數。

使用這兩個API時需要在頁面完全加載完成之后才能使用，最簡單的辦法是在window.onload事件中讀取各種數據，因為很多值必須在頁面完全加載之后才能得出。

Navigation Timing

Navigation Timing API能夠幫助網站開發者檢測真實用戶數據（RUM），例如帶寬、延遲或主頁的整體頁面加載時間。用法如下：

var timinhObj = performance.timing;

performance.timing返回的是一個PerformanceTiming對象，如下圖：

如果要獲得 page load time(頁面加載時間)，可以用PerformanceTiming對象中loadEventStart的值減去navigationStart的值：

plt = page.loadEventStart - page.navigationStart;

需要注意的是，PerformanceTiming對象中各屬性值的單位均為毫秒數。

PerformanceTiming對象包含了各種與瀏覽器性能有關的時間數據，提供瀏覽器處理網頁各個階段的耗時，它包含的頁面性能屬性如下表：

屬性	含義
navigationStart	準備加載新頁面的起始時間
redirectStart	如果發生了HTTP重定向，并且從導航開始，中間的每次重定向，都和當前文檔同域的話，就返回開始重定向的timing.fetchStart的值。其他情況，則返回0
redirectEnd	如果發生了HTTP重定向，并且從導航開始，中間的每次重定向，都和當前文檔同域的話，就返回最后一次重定向，接收到最后一個字節數據后的那個時間.其他情況則返回0
fetchStart	如果一個新的資源獲取被發起，則 fetchStart必須返回用戶代理開始檢查其相關緩存的那個時間，其他情況則返回開始獲取該資源的時間
domainLookupStart	返回用戶代理對當前文檔所屬域進行DNS查詢開始的時間。如果此請求沒有DNS查詢過程，如長連接，資源cache,甚至是本地資源等。那么就返回 fetchStart的值
domainLookupEnd	返回用戶代理對結束對當前文檔所屬域進行DNS查詢的時間。如果此請求沒有DNS查詢過程，如長連接，資源cache，甚至是本地資源等。那么就返回 fetchStart的值
connectStart	返回用戶代理向服務器服務器請求文檔，開始建立連接的那個時間，如果此連接是一個長連接，又或者直接從緩存中獲取資源（即沒有與服務器建立連接）。則返回domainLookupEnd的值
(secureConnectionStart)	可選特性。用戶代理如果沒有對應的東東，就要把這個設置為undefined。如果有這個東東，并且是HTTPS協議，那么就要返回開始SSL握手的那個時間。如果不是HTTPS，那么就返回0
connectEnd	返回用戶代理向服務器服務器請求文檔，建立連接成功后的那個時間，如果此連接是一個長連接，又或者直接從緩存中獲取資源（即沒有與服務器建立連接）。則返回domainLookupEnd的值
requestStart	返回從服務器、緩存、本地資源等，開始請求文檔的時間
responseStart	返回用戶代理從服務器、緩存、本地資源中，接收到第一個字節數據的時間
responseEnd	返回用戶代理接收到最后一個字符的時間，和當前連接被關閉的時間中，更早的那個。同樣，文檔可能來自服務器、緩存、或本地資源
domLoading	返回用戶代理把其文檔的 "current document readiness" 設置為 "loading"的時候
domInteractive	返回用戶代理把其文檔的 "current document readiness" 設置為 "interactive"的時候.
domContentLoadedEventStart	返回文檔發生 DOMContentLoaded事件的時間
domContentLoadedEventEnd	文檔的DOMContentLoaded 事件的結束時間
domComplete	返回用戶代理把其文檔的 "current document readiness" 設置為 "complete"的時候
loadEventStart	文檔觸發load事件的時間。如果load事件沒有觸發，那么該接口就返回0
loadEventEnd	文檔觸發load事件結束后的時間。如果load事件沒有觸發，那么該接口就返回0

一般來說，我們需要獲取到的頁面性能參數包括：DNS查詢耗時、TCP鏈接耗時、request請求耗時、解析dom樹耗時、白屏時間、domready時間、onload時間等，而這些參數是通過上面的performance.timing各個屬性的差值組成的，計算方法如下：

DNS查詢耗時 ：domainLookupEnd - domainLookupStart
TCP鏈接耗時 ：connectEnd - connectStart
request請求耗時 ：responseEnd - responseStart
解析dom樹耗時 ： domComplete - domInteractive
白屏時間 ：responseStart - navigationStart
domready時間 ：domContentLoadedEventEnd - navigationStart
onload時間 ：loadEventEnd - navigationStart

Navigation Timing的目的是用于分析頁面整體性能指標。如果要獲取個別資源（例如JS、圖片）的性能指標，就需要使用Resource Timing API。

Resource Timing

瀏覽器獲取網頁時，會對網頁中每一個靜態資源（腳本文件、樣式表、圖片文件等等）發出一個HTTP請求。Resource Timing可以獲取到單個靜態資源從開始發出請求到獲取響應之間各個階段的Timing。用法如下:

var resourcesObj = performance.getEntries();

Resource Timing返回的是一個對象數組，數組的每一個項都是一個對象，這個對象中包含了當前靜態資源的加載Timing，如下圖：

我們可以根據數組的長度獲取到頁面中靜態資源的數量，然后通過數組的每一項分析單個靜態資源的請求狀態。

performance中還有一些性能API尚未成為W3C標準（如第一張圖中的工作進度），有的處于編輯草案階段，有的處于工作草案階段，當這些API逐漸成為推薦標準以后，一定會對我們進行前端性能監控帶來很大的便利，我們也可以通過這些API很方便地直接從頁面中獲取到我們希望得到的性能信息。

相關資源

performance API

window.performance 詳解

使用簡潔的 Navigation Timing API 測試網頁加載速度（不完全譯文）

GPU云服務器云服務器前端性能前端性能優化前端開發性能優化 web前端快速入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86227.html

前端每周清單第 29 期：Web 現狀分析與優化策略、Vue 單元測試、Headless Chrom

摘要：前端每周清單第期現狀分析與優化策略單元測試爬蟲作者王下邀月熊編輯徐川前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清單第 29 期：Web 現狀分析與優化策略...

HackerShell 2019-08-21 12:05 評論0 收藏0
前端每周清單第 48 期：Slack Webpack 構建優化，CSS 命名規范與用戶追蹤，Vue.

摘要：發布是由團隊開源的，操作接口庫，已成為事實上的瀏覽器操作標準。本周正式發布，為我們帶來了，，支持自定義頭部與腳部，支持增強，兼容原生協議等特性變化。新特性介紹日前發布了大版本更新，引入了一系列的新特性與提升，本文即是對這些變化進行深入解讀。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清單專注前端...

sean 2019-08-22 13:57 評論0 收藏0
Web 前端性能分析（一）

摘要：參考鏈接初探監控網頁與程序性能使用簡潔的測試網頁加載速度前端性能統計前端性能監控起步使用性能快速分析前端性能通過以上幾篇文章，可以對前端性能相關的概念和有一個整體的認識。但在我們這次的前端性能監控方案中，并不將其作為主要的監控指標。參考鏈接初探 performance – 監控網頁與程序性能使用簡潔的 Navigation Timing API 測試網頁加載速度前端性能統計 ...

Ashin 2019-08-23 16:22 評論0 收藏0
前端清單第 27 期：React Patent License 回復，Shopify WebVR 購

摘要：新聞熱點國內國外，前端最新動態就開源許可證風波進行回復數周前，基金會決定禁止旗下項目使用，因為其在標準的許可證之外添加了專利聲明此舉引發了社區的廣泛討論，希望能夠更新其開源許可證。 showImg(https://segmentfault.com/img/remote/1460000010777089); 前端每周清單第 27 期：React Patent License 回復，Sho...

jeffrey_up 2019-08-21 12:03 評論0 收藏0
設計架構

摘要：先來看一張系統前后端架構模型圖。一種接口的約定本文用于定義一種統一的接口設計方案，希望具有參考價值。，和都是常見的軟件架構設計模式，它通過分離關注點來改進代碼的組織方式。如何無痛降低 if else 面條代碼復雜度相信不少同學在維護老項目時，都遇到過在深深的 if else 之間糾纏的業務邏輯。面對這樣的一團亂麻，簡單粗暴地繼續增量修改常常只會讓復雜度越來越高，可讀性越來越差，有沒...

graf 2019-06-24 17:56 評論0 收藏0