首頁 > 軟體

PerformanceObserver自動獲取首屏時間實現範例

2022-07-05 18:04:40

介紹

PerformanceObserver 可用於獲取效能相關的資料,例如首幀fp首屏fcp首次有意義的繪製 fmp等等。

建構函式

PerformanceObserver() 建立並返回一個新的 PerformanceObserver 物件。

提供的方法

PerformanceObserver.observe()

當記錄的效能指標在指定的 entryTypes 之中時,將呼叫效能觀察器的回撥函數。

PerformanceObserver.disconnect()

停止效能觀察者回撥接收到效能指標。

PerformanceObserver.takeRecords()

返回儲存在效能觀察器中的效能指標的列表,並將其清空。

重點我們看看observer.observe(options);

options

一個只裝了單個鍵值對的物件,該鍵值對的鍵名規定為 entryTypes。entryTypes 的取值要求如下:

entryTypes 的值:一個放字串的陣列,字串的有效值取值在效能條目型別 中有詳細列出。如果其中的某個字串取的值無效,瀏覽器會自動忽略它。

另:若未傳入 options 實參,或傳入的 options 實參為空陣列,會丟擲 TypeError。

範例

<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>

獲取結果

根據列印結果我們可以推測出來:

entryTypes裡的值其實就是我們告訴PerformanceObserver,我們想要獲取的某一方面的效能值。例如傳入paint,就是說我們想要得到fcp和fp。

所以我們看列印,它列印出來了fp和fcp

這裡有必要解釋一下什麼是fp,fcp,fpm

TTFB:Time To First Byte,首位元組時間

FP:First Paint,首次繪製,繪製Body

FCP:First Contentful Paint,首次有內容的繪製,第一個dom元素繪製完成

FMP:First Meaningful Paint,首次有意義的繪製

TTI:Time To Interactive,可互動時間,整個內容渲染完成

不懂?看圖!

FP僅有一個div根節點

FCP包含頁面的基本框架,但沒有資料內容

FMP包含頁面的所有元素及資料

Wow!恍然大悟!

實際使用

好了,我們在實際專案中怎麼取獲取呢?可以看看我的實現參考一下下:

  // 使用 PerformanceObserver 監聽 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);
            // 上報startTime操作
          }
        });
        observer.observe({
          entryTypes: [type],
        });
        return;
      }
    } catch (e) {
      // ios 不支援這種entryTypes,會報錯 https://caniuse.com/?search=PerformancePaintTiming
      console.warn('[assets-load-monitor] PerformanceObserver error:', (e || {}).message ? e.message : e);
    }
  }

這裡用了判斷是否可以使用PerformanceObserver,不能使用的話,我們是用其他方法的,例如MutationObserver,這個我們我們後面再講。

參考:

https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceObserver/observe

https://www.jb51.net/article/95836.htm

以上就是PerformanceObserver獲取首屏時間實現範例的詳細內容,更多關於PerformanceObserver首屏時間的資料請關注it145.com其它相關文章!


IT145.com E-mail:sddin#qq.com