Web性能領(lǐng)域常見的專業(yè)術(shù)語

編者按：本文作者Berwin，W3C性能工作組成員，360導(dǎo)航資深前端工程師?！渡钊霚\出Vue.js》作者。

測量與排查網(wǎng)頁的性能瓶頸，是一名專業(yè)Web性能優(yōu)化者的基本功。本章將詳細(xì)介紹Web性能領(lǐng)域的一些專業(yè)術(shù)語，通過這些術(shù)語也可以側(cè)面了解是哪些因素在影響加載性能。

背景

衡量網(wǎng)頁的性能是一個比較瑣碎的事情，因為沒有某一個指標(biāo)或數(shù)字可以直接告訴我們網(wǎng)頁的性能怎樣，因為加載網(wǎng)頁不是一瞬間的事，準(zhǔn)確地說，它是一個過程，不存在某個單獨的 “時間點” 可以完全體現(xiàn)出網(wǎng)頁的性能，因為在網(wǎng)頁加載的過程中，有很多個比較關(guān)鍵的 “時間點” 可以影響用戶的感覺（感覺我們的網(wǎng)頁是 “快” 還是 “慢”）。而且不同類型的產(chǎn)品所側(cè)重的點也都不太一樣，可能同一個時間點，對于某些產(chǎn)品至關(guān)重要，但對于另外一些產(chǎn)品，則完全不care。

以https://www.google.com.hk為例，下圖是使用Lighthouse（一個性能測評工具）捕獲出的測評結(jié)果報告。

下圖是使用Chrome瀏覽器的DevTools捕獲出的加載性能結(jié)果報告。

從上面這兩張性能測評報告中，我們會發(fā)現(xiàn)報告通常會給出很多個 “關(guān)鍵時間點” 來表示性能數(shù)據(jù)，單獨的某個“時間點”無法體現(xiàn)出網(wǎng)頁的性能，只有將它們與自身的產(chǎn)品類型相結(jié)合，綜合評估，才能判斷出網(wǎng)頁的性能到底怎樣。而我們要做的，就是讀懂報告中的各種專業(yè)術(shù)語，并分辨出哪些因素影響了網(wǎng)頁的加載性能。

術(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的原理》(https://github.com/berwin/Blog/issues/42)

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

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

了解和測量網(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）》(https://github.com/berwin/Blog/issues/38)

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)來進行更詳細(xì)的對比。

博客文章這樣的頁面更側(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ù)。

推薦閱讀