背景

現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)越來(lái)越復(fù)雜，用戶體驗(yàn)日漸受到更多開發(fā)者的關(guān)注，但用戶體驗(yàn)和網(wǎng)站性能是比較主觀感受的概念，因此需要一些客觀的指標(biāo)來(lái)幫助衡量頁(yè)面的性能。

性能指標(biāo)

1.FP 白屏（First Paint Time ）： 從頁(yè)面開始加載到瀏覽器中檢測(cè)到渲染（任何渲染）時(shí)被觸發(fā)（例如背景改變，樣式應(yīng)用等）

（白屏?xí)r間過(guò)長(zhǎng)，會(huì)讓用戶認(rèn)為我們的頁(yè)面不能用或者可用性差）

計(jì)算的方式->

白屏?xí)r間 = firstPaint - pageStartTime

2.FCP 首屏（first contentful paint ）：從頁(yè)面開始加載到頁(yè)面內(nèi)容的任何部分呈現(xiàn)在屏幕上的時(shí)間。

（關(guān)注的焦點(diǎn)是內(nèi)容，這個(gè)度量可以知道用戶什么時(shí)候收到有用的信息（文本，圖像等））

計(jì)算的方式->

首屏?xí)r間 =? firstContentTime - pageStarTime

3.FMP 首次有效繪制（First Meaningful Paint ）： 表示頁(yè)面的“主要內(nèi)容” 開始出現(xiàn)在屏幕上的時(shí)間點(diǎn)，這項(xiàng)指標(biāo)因頁(yè)面邏輯而異，因此上不存在任何規(guī)范。

（只是記錄了加載體驗(yàn)的最開始。如果頁(yè)面顯示的是啟動(dòng)圖片或者loading 動(dòng)畫，這個(gè)時(shí)刻對(duì)用用戶而言沒有意義）

4.LCP （Largest Contentful Paint ）：LCP 指標(biāo)代表的是視窗最大可見圖片或者文本塊的渲染時(shí)間。

（可以幫助我們捕獲更多的首次渲染之后的加載性能，但這各指標(biāo)過(guò)于復(fù)雜，而且很難解釋，也經(jīng)常出錯(cuò)，沒辦法確定主要內(nèi)容什么時(shí)候加載完。）

·<img> 元素

·<svg> 中的<imge>元素

·<video> 元素（如果定義了封面圖，會(huì)影響LCP）

·帶url()背景圖的元素

·塊級(jí)元素有文本節(jié)點(diǎn)或者內(nèi)聯(lián)文本子元素

5.長(zhǎng)任務(wù)（Long Task）：當(dāng)一個(gè)任務(wù)執(zhí)行時(shí)間超過(guò)50ms 時(shí)消耗到的任務(wù)

（50ms 閾值是從RAIL模型總結(jié)出來(lái)的結(jié)論，這個(gè)是google研究用戶感知得出的結(jié)論，類似永華的感知/耐心的閾值，超過(guò)這個(gè)閾值的任務(wù)，用戶會(huì)感知到頁(yè)面的卡頓）

6.TTI （Time To Internative）：從頁(yè)面開始到它的主要子資源加載到能夠快速地響應(yīng)用戶輸入的時(shí)間。（沒有耗時(shí)長(zhǎng)任務(wù)）

計(jì)算方式：

1.FCP 時(shí)間為起始時(shí)間

2.查找到指示有5s的靜默窗口時(shí)間（沒有長(zhǎng)任務(wù)并且不超過(guò)兩個(gè)正在執(zhí)行的GET請(qǐng)求）。

3.向后搜索靜默窗口前的最后一個(gè)長(zhǎng)任務(wù)，如果沒有找到長(zhǎng)任務(wù)，則在FCP上停止。

4.TTI 是在安靜窗口之前最后一個(gè)長(zhǎng)任務(wù)的結(jié)束時(shí)間（如果沒有找到長(zhǎng)任務(wù)，則與FCP相同）

7.首次輸入延時(shí)FID （first Input Delay）：從用戶第一次與頁(yè)面交互到瀏覽器實(shí)際能夠開始處理事件的時(shí)間。（點(diǎn)擊，輸入，按鍵）

（人為因素會(huì)干預(yù)TTI 的結(jié)果強(qiáng)調(diào)了第一印象，而第一印象對(duì)于塑造我們對(duì)網(wǎng)站質(zhì)量和可靠性的整體印象至關(guān)重要，因此，改善網(wǎng)站的第一個(gè)用戶交互將對(duì)提高整體的網(wǎng)絡(luò)交互性產(chǎn)生最大的影響）

8.總阻塞時(shí)間TBT（total blocking time ）： 衡量從FCP到TTI 之間主線程被阻塞時(shí)長(zhǎng)的總和。

（FID需要依賴用戶實(shí)際進(jìn)行操作來(lái)計(jì)算，不方便開發(fā)者通過(guò)工具進(jìn)行測(cè)量）

計(jì)算方式：

TBI = 200 + 40 +105

9.DCL （DOMContentLoaded）：當(dāng)HTML 文檔被完全加載和解析完成之后，DOMContentLoaded 事件被觸發(fā)，無(wú)需等待樣式，圖像和子框架的完成加載。

10.L（onLoaded）：當(dāng)依賴的資源，全部加載完畢之后才會(huì)觸發(fā)

總結(jié)：

頁(yè)面加載期間的指標(biāo)：目前我們?cè)趙eb上看到的最大的交互問(wèn)題發(fā)生在頁(yè)面加載過(guò)程中

加載渲染和交互響應(yīng)

FP vs FCP?

簡(jiǎn)單頁(yè)面，二者差距不大，任選其一即可

復(fù)雜頁(yè)面，需要處理更多復(fù)雜元素，白屏和白屏?xí)r間相差大，通常首屏?xí)r間會(huì)更有用

FMP vs LCP?

LCP對(duì)我們來(lái)說(shuō)是一個(gè)非常直觀的可以看到真實(shí)用戶的體驗(yàn)的數(shù)據(jù)

LongTask ---- TTI， FID，TBT?

FID 更適合真實(shí)用戶場(chǎng)景

TBT 更適合實(shí)驗(yàn)室場(chǎng)景

?