<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，就是說(shuō)我們想要得到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è)面的基本框架，但沒(méi)有數(shù)據(jù)內(nèi)容

FMP包含頁(yè)面的所有元素及數(shù)據(jù)

Wow！恍然大悟！

實(shí)際使用

好了，我們?cè)趯?shí)際項(xiàng)目中怎么取獲取呢？可以看看我的實(shí)現(xiàn)參考一下下：

  // 使用 PerformanceObserver 監(jiān)聽(tīng) fcp
  if (!!PerformanceObserver){
    try {
      const type = 'paint';
      if ((PerformanceObserver.supportedEntryTypes || []).includes(type)) {
        observer = new PerformanceObserver((entryList)=&gt;{
          for(const entry of entryList.getEntriesByName('first-contentful-paint')){
            const { startTime } = entry;
            console.log('[assets-load-monitor] PerformanceObserver fcp:', startTime);
            // 上報(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è)我們我們后面再講。