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

時間：2023-07-18 03:03:02 | 來源：網(wǎng)站運營

時間：2023-07-18 03:03:02 來源：網(wǎng)站運營

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

背景

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

以https://www.google.com為例，下圖是使用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不包含默認背景繪制，但包含非默認的背景繪制。

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

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

FP與FCP這兩個指標之間的主要區(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)在屏幕上的時間點。它是我們測量用戶加載體驗的主要指標。

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

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

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

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

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

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

以上圖為例，綠色方塊的區(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)品什么時候“能用”呢？這就需要另一個性能指標“TTI”了。

TTI（全稱“Time to Interactive”，翻譯為“可交互時間”） 表示網(wǎng)頁第一次 完全達到可交互狀態(tài) 的時間點?？山换顟B(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)了，但整個頁面可能還沒達到。從名字也可以看出這個指標的意思，第一次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是不需要用戶參與的指標，但如果我們真的想知道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標簽里注冊一個事件（click、mousedown、keydown、touchstart、pointerdown），然后在事件響應(yīng)函數(shù)中使用當(dāng)前時間減去事件對象被創(chuàng)建的時間即可。

performance.now() - event.timeStampDCL 表示DomContentloaded事件觸發(fā)的時間。

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

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

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

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