相關(guān) Performance API 都在 window.performance 對象下

performance.now() 方法

• 精度精確到微妙
• 獲取的是把頁面打開時間點(diǎn)作為基點(diǎn)的相對時間，不依賴操作系統(tǒng)的時間。

部分瀏覽器不支持 performance.now() 方法，可以用 Date.now() 模擬

performance.now = function() {// performance.timing.navigationStart 表示頁面打開時的時間戳，非高精度時間return Date.now() - performance.timing.navigationStart
}

度量首屏

First Paint（FP，第一次繪制時間）

FP代表瀏覽器第一次在頁面上繪制的時間，這個時間僅僅是指開始繪制的時間，但是未必真的繪制了什么有效的內(nèi)容。

First Contentful Paint（FCP，第一次有內(nèi)容的繪制）

FCP代表瀏覽器第一次繪制出 DOM 元素（如文字、<input>標(biāo)簽等）的時間。

FP可能和FCP是同一個時間，也可能早于FCP，一般來說兩者的差距不會太大。

Time to Interactive（TTI，可交互時間）

First Meaningful Paint（FMP，第一次有意義的繪制）

FMP是一個主觀的指標(biāo)，畢竟意義本身就是一個主觀的概念。

FMP作為一個主觀指標(biāo)，指的是我們主觀認(rèn)為頁面渲染有意義內(nèi)容的時間點(diǎn)。

度量FMP的方式：

關(guān)鍵邏輯計時

手動使用 JavaScript 記錄時間點(diǎn)，從而將其作為 FMP 的時間。

例如：在 React 中，可以在組件第一次掛載后打一個時間點(diǎn)。

useEffect(() => {const FMP_TIME = performance.now()reprotFMP(FMP_TIME)
}, [])

Hero Element

某項重要元素的展示時間就可以被視為 FMP 的時間，如搜索結(jié)果頁的搜索內(nèi)容、首頁的banner等。這樣的關(guān)鍵元素就是 Hero Element?？梢允褂?Hero Element 的渲染完成時間作為 FMP。

如：

<img onload="reportNowAsFMP"></img>

為了使度量結(jié)果更加精準(zhǔn)，Google 也在推動新的標(biāo)準(zhǔn)提案 element-timing?

同樣以圖片為例，可以使用如下方式來標(biāo)記和計算這張圖片的渲染時間，而后從 JavaScript 的 Performance API 中得到其具體的耗時。

<img src="my_image.jpg" elementtiming="foobar">

這種方式目前只有 Chrome 支持

Frames Per Second（FPS，每秒傳輸幀數(shù)）

度量流暢度的指標(biāo)

對于一個網(wǎng)頁來說，達(dá)到 60fps 就會讓用戶感到非常流暢，如果顯著低于這個值，那么用戶可能就會感到卡頓。

頁面至少每隔 16.7ms 就需要渲染一次，否則就會出現(xiàn)丟幀。

如果 FPS 長期處在過低的值，用戶感受到的卡頓就會非常明顯。

Core Web Vitals （核心 Web?指標(biāo)）

Largest Contentful Paint （LCP，最大元素渲染時間）

LCP 關(guān)注的頁面上最大面積的元素渲染完成的時間。

瀏覽器會持續(xù)探測頁面中占用面積最大的元素，這個元素可能會在加載過程中發(fā)生變化（如出現(xiàn)了占用面積更大的元素），直到頁面完全加載后，才會把最終占用面積最大的元素的渲染時間定為LCP探測的元素。

如何確定面積：

元素的面積主要是根據(jù)用戶在頁面中能夠看到的元素的大小計算的。

• 顯示到屏幕以外，或者被容器的 overflow 裁剪、遮擋的面積不計算在內(nèi)。
• 文字元素的面積為包含文字的最小矩形的面積。
• 圖片以實(shí)際<img />組件的大小計算，而非原始圖片的大小。
• CSS 設(shè)置的 border、padding 等都不計算在內(nèi)。

1