術(shù)語

FP、FCP、FMP與LCP

從前面的評測報告中，我們會看到FP、FCP、FMP與LCP這幾個字母很接近的術(shù)語，實際上他們的意思也非常接近，都表示瀏覽器在屏幕上渲染像素的時間點。F是First的首字母縮寫，表示“第一次”；P是Paint的首字母縮寫，表示“繪制”；C是Contentful的首字母縮寫，表示“內(nèi)容”。

FP（全稱“First Paint”，翻譯為“首次繪制”） 是時間線上的第一個“時間點”，它代表瀏覽器第一次向屏幕傳輸像素的時間，也就是頁面在屏幕上首次發(fā)生視覺變化的時間。

注意：FP不包含默認(rèn)背景繪制，但包含非默認(rèn)的背景繪制。

FCP（全稱“First Contentful Paint”，翻譯為“首次內(nèi)容繪制”），顧名思義，它代表瀏覽器第一次向屏幕繪制 “內(nèi)容”。

注意：只有首次繪制文本、圖片（包含背景圖）、非白色的canvas或SVG時才被算作FCP。

FP與FCP這兩個指標(biāo)之間的主要區(qū)別是：FP是當(dāng)瀏覽器開始繪制內(nèi)容到屏幕上的時候，只要在視覺上開始發(fā)生變化，無論是什么內(nèi)容觸發(fā)的視覺變化，在這一刻，這個時間點，叫做FP。

相比之下，F(xiàn)CP指的是瀏覽器首次繪制來自DOM的內(nèi)容。例如：文本，圖片，SVG，canvas元素等，這個時間點叫FCP。

FP和FCP可能是相同的時間，也可能是先FP后FCP。

FMP（全稱“First Meaningful Paint”，翻譯為“首次有效繪制”） 表示頁面的“主要內(nèi)容”開始出現(xiàn)在屏幕上的時間點。它是我們測量用戶加載體驗的主要指標(biāo)。

FMP本質(zhì)上是通過一個算法來猜測某個時間點可能是FMP，所以有時候不準(zhǔn)。

想詳細(xì)了解FMP及它的原理可以看我的另一篇文章：《捕獲FMP的原理》

圖3給出了FP、FCP、FMP之間的比較。

[圖片上傳失敗...(image-a74d87-1589361599984)]

LCP（全稱“Largest Contentful Paint”） 表示可視區(qū)“內(nèi)容”最大的可見元素開始出現(xiàn)在屏幕上的時間點。

[圖片上傳失敗...(image-a53845-1589361599984)]

了解和測量網(wǎng)站真實的性能其實非常困難，像load和DOMContentLoaded不會告訴我們用戶什么時候可以在屏幕上看到內(nèi)容。而FP和FCP又只能捕獲整個渲染過程的最開始，FMP更好一點，但是它的算法比較復(fù)雜，而且前面說了，有時候不準(zhǔn)。

根據(jù)W3C Web性能工作組的討論和Google的研究，發(fā)現(xiàn)測量頁面主要內(nèi)容的可見時間有一種更精準(zhǔn)且簡單的方法是查看什么時候渲染最大元素。

以上圖為例，綠色方塊的區(qū)域是內(nèi)容最大的元素，所以在這個例子中，LCP等于這個元素開始渲染的時間。

現(xiàn)在我們了解了FP、FCP、FMP以及LCP這幾個術(shù)語，F(xiàn)P與FCP可以讓我們知道，我們的產(chǎn)品何時開始渲染；而FMP與LCP可以讓我們了解我們的產(chǎn)品何時“有用”，站在用戶的角度，F(xiàn)MP與LCP可以表示我們的產(chǎn)品需要多久才能體現(xiàn)出價值。

注意，這里說的是“有用”，而不是“能用”；那我們?nèi)绾尾拍苤牢覀兊漠a(chǎn)品什么時候“能用”呢？這就需要另一個性能指標(biāo)“TTI”了。

TTI（全稱“Time to Interactive”，翻譯為“可交互時間”） 表示網(wǎng)頁第一次 完全達(dá)到可交互狀態(tài) 的時間點。可交互狀態(tài)指的是頁面上的UI組件是可以交互的（可以響應(yīng)按鈕的點擊或在文本框輸入文字等），不僅如此，此時主線程已經(jīng)達(dá)到“流暢”的程度，主線程的任務(wù)均不超過50毫秒。TTI很重要，因為TTI可以讓我們了解我們的產(chǎn)品需要多久可以真正達(dá)到“可用”的狀態(tài)。

關(guān)于50毫秒的問題我之前的博客文章有多次提到，可以參考這篇文章《時間切片（Time Slicing）》

TTFB（全稱“Time to First Byte”） 表示瀏覽器接收第一個字節(jié)的時間

FCI（全稱“First CPU Idle”） 是對TTI的一種補充，TTI可以告訴我們頁面什么時候完全達(dá)到可用，但是我們不知道瀏覽器第一次可以響應(yīng)用戶輸入是什么時候。我們不知道網(wǎng)頁的“最小可交互時間”是多少，最小可交互時間是說網(wǎng)頁的首屏已經(jīng)達(dá)到了可交互的狀態(tài)了，但整個頁面可能還沒達(dá)到。從名字也可以看出這個指標(biāo)的意思，第一次CPU空閑，主線程空閑就代表可以接收用戶的響應(yīng)了。

更通俗的理解TTI與FCI的區(qū)別：FCI代表瀏覽器真正的第一次可以響應(yīng)用戶的輸入，而TTI代表瀏覽器已經(jīng)可以持續(xù)性的響應(yīng)用戶的輸入。

FID（全稱“First Input Delay”，翻譯為“首次輸入延遲”） 顧名思義，F(xiàn)ID指的是用戶首次與產(chǎn)品進(jìn)行交互時，我們產(chǎn)品可以在多長時間給出反饋。TTI可以告訴我們網(wǎng)頁什么時候可以開始流暢地響應(yīng)用戶的交互，但是如果用戶在TTI的時間內(nèi)，沒有與網(wǎng)頁產(chǎn)生交互，那么TTI其實是影響不到用戶的，TTI是不需要用戶參與的指標(biāo)，但如果我們真的想知道TTI對用戶的影響，我們需要FID。不同的用戶可能會在TTI之前開始與網(wǎng)頁產(chǎn)生交互，也可能在TTI之后才與網(wǎng)頁產(chǎn)生交互。所以對于不同的用戶它的FID是不同的。如果在TTI之前用戶就已經(jīng)與網(wǎng)頁產(chǎn)生了交互，那么它的FID時間就比較長，而如果在TTI之后才第一次與網(wǎng)頁產(chǎn)生交互，那么他的FID時間就短。

捕獲FID比較簡單，我們只需要在網(wǎng)頁的head標(biāo)簽里注冊一個事件（click、mousedown、keydown、touchstart、pointerdown），然后在事件響應(yīng)函數(shù)中使用當(dāng)前時間減去事件對象被創(chuàng)建的時間即可。

performance.now() - event.timeStamp

DCL 表示DomContentloaded事件觸發(fā)的時間。

L 表示onLoad事件觸發(fā)的時間。

DomContentloaded事件與onLoad事件的區(qū)別是，瀏覽器解析HTML這個操作完成后立刻觸發(fā)DomContentloaded事件，而只有頁面所有資源都加載完畢后（比如圖片，CSS），才會觸發(fā)onLoad事件。

Speed Index 表示顯示頁面可見部分的平均時間（注意，是真正的可見，用戶可以立馬看見的，屏幕外的部分不算），數(shù)值越小說明速度越快，它主要用于測量頁面內(nèi)容在視覺上填充的速度。通常會使用這個指標(biāo)來進(jìn)行性能的比較。比如優(yōu)化前和優(yōu)化后，我們的產(chǎn)品與競品的性能比較等。但是只能用于 粗略 的比較，不同的產(chǎn)品側(cè)重點完全不同，所以還是需要根據(jù)自己產(chǎn)品所側(cè)重的方向，并結(jié)合其他指標(biāo)來進(jìn)行更詳細(xì)的對比。

博客文章這樣的頁面更側(cè)重FMP（用戶希望盡快看到有價值的內(nèi)容），而類似后臺管理系統(tǒng)或在線PPT這種產(chǎn)品則更側(cè)重TTI（用戶希望盡快與產(chǎn)品進(jìn)行交互）。

結(jié)語

本章我們介紹了Web性能領(lǐng)域常見的專業(yè)術(shù)語，包括：FP、FCP、FMP、TTI、LCP、TTFB、FCI、FID、DCL、L、Speed Index。這些術(shù)語可以幫助我們理解性能報告給出的各種數(shù)據(jù)。