快用上PerformanceObserver，別再手動(dòng)計(jì)算首屏?xí)r間了
大家好，我是陽(yáng)光，今天給大家介紹一個(gè)非常好用的瀏覽器api：PerformanceObserver ， 我們可以用它來(lái)獲取首屏、白屏的時(shí)間，就不用再麻煩地手動(dòng)去計(jì)算了。
1、介紹
PerformanceObserver 可用于獲取性能相關(guān)的數(shù)據(jù)，例如首幀fp、首屏fcp、首次有意義的繪制 fmp等等。
構(gòu)造函數(shù)
PerformanceObserver()創(chuàng)建并返回一個(gè)新的 PerformanceObserver 對(duì)象。
提供的方法
PerformanceObserver.observe()當(dāng)記錄的性能指標(biāo)在指定的 entryTypes 之中時(shí)，將調(diào)用性能觀察器的回調(diào)函數(shù)。
PerformanceObserver.disconnect()停止性能觀察者回調(diào)接收到性能指標(biāo)。
PerformanceObserver.takeRecords()返回存儲(chǔ)在性能觀察器中的性能指標(biāo)的列表，并將其清空。
重點(diǎn)我們看看observer.observe(options)
options
一個(gè)只裝了單個(gè)鍵值對(duì)的對(duì)象，該鍵值對(duì)的鍵名規(guī)定為 entryTypes。entryTypes 的取值要求如下:
entryTypes 的值：一個(gè)放字符串的數(shù)組，字符串的有效值取值在性能條目類型 中有詳細(xì)列出。如果其中的某個(gè)字符串取的值無(wú)效，瀏覽器會(huì)自動(dòng)忽略它。
另：若未傳入 options 實(shí)參，或傳入的 options 實(shí)參為空數(shù)組，會(huì)拋出 TypeError。
2、實(shí)例
<script>
const observer = new PerformanceObserver((list) => {
for(const entry of list.getEntries()){
console.groupCollapsed(entry.name);
console.log(entry.entryType);
console.log(entry.startTime);
console.log(entry.duration);
console.groupEnd(entry.name);
}
})
observer.observe({entryTypes:['longtask','frame','navigation','resource','mark','measure','paint']});
</script>
獲取結(jié)果
根據(jù)打印結(jié)果我們可以推測(cè)出來(lái)：
entryTypes里的值其實(shí)就是我們告訴PerformanceObserver，我們想要獲取的某一方面的性能值。例如傳入paint，就是說我們想要得到fcp和fp。
所以我們看打印，它打印出來(lái)了fp和fcp。
這里有必要解釋一下什么是fp，fcp，fpm
TTFB：Time To First Byte，首字節(jié)時(shí)間
FP：First Paint，首次繪制，繪制Body
FCP：First Contentful Paint，首次有內(nèi)容的繪制，第一個(gè)dom元素繪制完成
FMP：First Meaningful Paint，首次有意義的繪制
TTI：Time To Interactive，可交互時(shí)間，整個(gè)內(nèi)容渲染完成
不懂?看圖!
FP僅有一個(gè)div根節(jié)點(diǎn)
FCP包含頁(yè)面的基本框架，但沒有數(shù)據(jù)內(nèi)容
FMP包含頁(yè)面的所有元素及數(shù)據(jù)
Wow!恍然大悟!
3、實(shí)際使用
好了，我們?cè)趯?shí)際項(xiàng)目中怎么取獲取呢?可以看看我的實(shí)現(xiàn)參考一下下：
// 使用 PerformanceObserver 監(jiān)聽 fcp
if (!!PerformanceObserver){
try {
const type = 'paint';
if ((PerformanceObserver.supportedEntryTypes || []).includes(type)) {
observer = new PerformanceObserver((entryList)=>{
for(const entry of entryList.getEntriesByName('first-contentful-paint')){
const { startTime,duration } = entry;
console.log('[assets-load-monitor] PerformanceObserver fcp:', startTime+duration);
// 上報(bào)startTime操作
}
});
observer.observe({
entryTypes: [type],
});
return;
}
} catch (e) {
// ios 不支持這種entryTypes，會(huì)報(bào)錯(cuò) https://caniuse.com/?search=PerformancePaintTiming
console.warn('[assets-load-monitor] PerformanceObserver error:', (e || {}).message ? e.message : e);
}
}
這里用了判斷是否可以使用PerformanceObserver，不能使用的話，我們是用其他方法的，例如MutationObserver，這個(gè)我們我們后面再講。
4、參考文章：
https://blog.csdn.net/weixin_40970987/article/details/108121988 https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceObserver/observe。
