術(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)蠢琳。

想詳細了解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)頁第一次 完全達到可交互狀態(tài) 的時間點￠冢可交互狀態(tài)指的是頁面上的UI組件是可以交互的（可以響應(yīng)按鈕的點擊或在文本框輸入文字等）参淫，不僅如此，此時主線程已經(jīng)達到“流暢”的程度剃袍，主線程的任務(wù)均不超過50毫秒黄刚。TTI很重要，因為TTI可以讓我們了解我們的產(chǎn)品需要多久可以真正達到“可用”的狀態(tài)民效。

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

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

FCI（全稱“First CPU Idle”） 是對TTI的一種補充，TTI可以告訴我們頁面什么時候完全達到可用畏邢，但是我們不知道瀏覽器第一次可以響應(yīng)用戶輸入是什么時候业扒。我們不知道網(wǎng)頁的“最小可交互時間”是多少，最小可交互時間是說網(wǎng)頁的首屏已經(jīng)達到了可交互的狀態(tài)了舒萎，但整個頁面可能還沒達到程储。從名字也可以看出這個指標(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)品進行交互時掏缎，我們產(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)來進行性能的比較沦泌。比如優(yōu)化前和優(yōu)化后糊昙，我們的產(chǎn)品與競品的性能比較等。但是只能用于 粗略 的比較赦肃，不同的產(chǎn)品側(cè)重點完全不同溅蛉，所以還是需要根據(jù)自己產(chǎn)品所側(cè)重的方向公浪，并結(jié)合其他指標(biāo)來進行更詳細的對比。

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

結(jié)語

本章我們介紹了Web性能領(lǐng)域常見的專業(yè)術(shù)語，包括：FP镜撩、FCP预柒、FMP、TTI袁梗、LCP宜鸯、TTFB、FCI遮怜、FID淋袖、DCL、L锯梁、Speed Index即碗。這些術(shù)語可以幫助我們理解性能報告給出的各種數(shù)據(jù)。