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

mj 發(fā)布于2019-08-21 10:48 / 2936人閱讀

摘要：性能時(shí)間線以一個(gè)統(tǒng)一的接口獲取由和所收集的性能數(shù)據(jù)。瀏覽器支持下表列舉了當(dāng)前主流瀏覽器對(duì)性能的支持，其中標(biāo)注星號(hào)的內(nèi)容并非來(lái)自于性能工作小組。

頁(yè)面的性能問(wèn)題一直是產(chǎn)品開(kāi)發(fā)過(guò)程中的重要一環(huán)，很多公司也一直在使用各種方式監(jiān)控產(chǎn)品的頁(yè)面性能。從控制臺(tái)工具、Fiddler抓包工具，到使用DOMContentLoaded和document.onreadystatechange這種侵入式j(luò)avascript代碼方式來(lái)檢測(cè)DOM事件發(fā)生和結(jié)束的時(shí)間，再到使用第三方工具如WebPagetest、Pingdom等通過(guò)在不同的瀏覽器環(huán)境和地域進(jìn)行測(cè)試來(lái)尋求優(yōu)化建議等等，這些方式不僅麻煩，而且測(cè)量的指標(biāo)比較單一。如果有一些可以幫我們直接獲取頁(yè)面性能信息的API出現(xiàn)，并且成為標(biāo)準(zhǔn)被被瀏覽器廠商支持，那性能監(jiān)控會(huì)不會(huì)又是另一幅藍(lán)圖？

好在W3C Web性能工作小組與各瀏覽器廠商都已認(rèn)識(shí)到性能對(duì)于web開(kāi)發(fā)的重要性，為了解決當(dāng)前性能測(cè)試的困難，W3C推出了一套性能API標(biāo)準(zhǔn)，各種瀏覽器對(duì)這套標(biāo)準(zhǔn)的支持如今也逐漸成熟起來(lái)。這套API的目的是簡(jiǎn)化開(kāi)發(fā)者對(duì)網(wǎng)站性能進(jìn)行精確分析與控制的過(guò)程，方便開(kāi)發(fā)者采取手段提高web性能。

整套標(biāo)準(zhǔn)包含了10余種API，各自針對(duì)性能檢測(cè)的某個(gè)方面。在下圖中可以看到它們當(dāng)前在規(guī)范流程中的進(jìn)展：

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

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

瀏覽器支持

下表列舉了當(dāng)前主流瀏覽器對(duì)性能API的支持，其中標(biāo)注星號(hào)的內(nèi)容并非來(lái)自于Web性能工作小組。

規(guī)范	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	-	-

其中有兩個(gè)可以幫助我們檢測(cè)真實(shí)用戶環(huán)境下的頁(yè)面加載Timing和頁(yè)面資源加載Timing: Navigation Timing和Resource Timing。這兩個(gè)API非常有用，可以幫助我們獲取頁(yè)面的Domready時(shí)間、onload時(shí)間、白屏?xí)r間等，以及單個(gè)頁(yè)面資源在從發(fā)送請(qǐng)求到獲取到rsponse各階段的性能參數(shù)。

使用這兩個(gè)API時(shí)需要在頁(yè)面完全加載完成之后才能使用，最簡(jiǎn)單的辦法是在window.onload事件中讀取各種數(shù)據(jù)，因?yàn)楹芏嘀当仨氃陧?yè)面完全加載之后才能得出。

Navigation Timing

Navigation Timing API能夠幫助網(wǎng)站開(kāi)發(fā)者檢測(cè)真實(shí)用戶數(shù)據(jù)（RUM），例如帶寬、延遲或主頁(yè)的整體頁(yè)面加載時(shí)間。用法如下：

var timinhObj = performance.timing;

performance.timing返回的是一個(gè)PerformanceTiming對(duì)象，如下圖：

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

plt = page.loadEventStart - page.navigationStart;

需要注意的是，PerformanceTiming對(duì)象中各屬性值的單位均為毫秒數(shù)。

PerformanceTiming對(duì)象包含了各種與瀏覽器性能有關(guān)的時(shí)間數(shù)據(jù)，提供瀏覽器處理網(wǎng)頁(yè)各個(gè)階段的耗時(shí)，它包含的頁(yè)面性能屬性如下表：

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

一般來(lái)說(shuō)，我們需要獲取到的頁(yè)面性能參數(shù)包括：DNS查詢耗時(shí)、TCP鏈接耗時(shí)、request請(qǐng)求耗時(shí)、解析dom樹(shù)耗時(shí)、白屏?xí)r間、domready時(shí)間、onload時(shí)間等，而這些參數(shù)是通過(guò)上面的performance.timing各個(gè)屬性的差值組成的，計(jì)算方法如下：

DNS查詢耗時(shí) ：domainLookupEnd - domainLookupStart
TCP鏈接耗時(shí) ：connectEnd - connectStart
request請(qǐng)求耗時(shí) ：responseEnd - responseStart
解析dom樹(shù)耗時(shí) ： domComplete - domInteractive
白屏?xí)r間 ：responseStart - navigationStart
domready時(shí)間 ：domContentLoadedEventEnd - navigationStart
onload時(shí)間 ：loadEventEnd - navigationStart

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

Resource Timing

瀏覽器獲取網(wǎng)頁(yè)時(shí)，會(huì)對(duì)網(wǎng)頁(yè)中每一個(gè)靜態(tài)資源（腳本文件、樣式表、圖片文件等等）發(fā)出一個(gè)HTTP請(qǐng)求。Resource Timing可以獲取到單個(gè)靜態(tài)資源從開(kāi)始發(fā)出請(qǐng)求到獲取響應(yīng)之間各個(gè)階段的Timing。用法如下:

var resourcesObj = performance.getEntries();

Resource Timing返回的是一個(gè)對(duì)象數(shù)組，數(shù)組的每一個(gè)項(xiàng)都是一個(gè)對(duì)象，這個(gè)對(duì)象中包含了當(dāng)前靜態(tài)資源的加載Timing，如下圖：

我們可以根據(jù)數(shù)組的長(zhǎng)度獲取到頁(yè)面中靜態(tài)資源的數(shù)量，然后通過(guò)數(shù)組的每一項(xiàng)分析單個(gè)靜態(tài)資源的請(qǐng)求狀態(tài)。

performance中還有一些性能API尚未成為W3C標(biāo)準(zhǔn)（如第一張圖中的工作進(jìn)度），有的處于編輯草案階段，有的處于工作草案階段，當(dāng)這些API逐漸成為推薦標(biāo)準(zhǔn)以后，一定會(huì)對(duì)我們進(jìn)行前端性能監(jiān)控帶來(lái)很大的便利，我們也可以通過(guò)這些API很方便地直接從頁(yè)面中獲取到我們希望得到的性能信息。

相關(guān)資源

performance API

window.performance 詳解

使用簡(jiǎn)潔的 Navigation Timing API 測(cè)試網(wǎng)頁(yè)加載速度（不完全譯文）