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

 更新時間:2022年07月05日 11:33:01   作者:陽光是sunny  
今天給大家介紹一個非常好用的瀏覽器api:?PerformanceObserver?,?我們可以用它來獲取首屏、白屏的時間,就不用再麻煩地手動去計算了

介紹

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

http://www.gpbgw.com/article/95836.htm

以上就是PerformanceObserver獲取首屏時間實現示例的詳細內容,更多關于PerformanceObserver首屏時間的資料請關注腳本之家其它相關文章!

相關文章

  • Javascript 之封裝(Package)

    Javascript 之封裝(Package)

    Javascript是一種基于對象(object-based)的語言,我們在JS中遇到的所有東西幾乎都是對象。但是,它又不是一種真正的面向對象編程語言,因為它的語法中沒有class(類)那么,如果我們要把"屬性"(property)和"方法"(method),封裝成一個對象
    2018-09-09
  • JS代碼檢查工具ESLint介紹與使用方法

    JS代碼檢查工具ESLint介紹與使用方法

    ESLint是一個JavaScript代碼靜態檢查工具,可以檢查JavaScript的語法錯誤,提示潛在的bug,本文將詳細介紹ESLint的使用方法
    2020-02-02
  • 在微信小程序中渲染HTML內容3種解決方案及分析與問題解決

    在微信小程序中渲染HTML內容3種解決方案及分析與問題解決

    在開發微信小程序時我們會在小程序內加入純HTML代碼,且HTML中包括圖片,視頻,甚至是事件,微信小程序為我們提供了3種解決方法,但它們的功能與實現方式與最終效果并不理想
    2020-01-01
  • 利用js實現簡單開關燈代碼

    利用js實現簡單開關燈代碼

    這篇文章主要分享的是如何利用js實現簡單開關燈代碼,下面文字圍繞js實現簡單開關燈的相關資料展開具體內容,需要的朋友可以參考以下,希望對大家又所幫助
    2021-11-11
  • 微信小程序 天氣預報開發實例代碼源碼

    微信小程序 天氣預報開發實例代碼源碼

    這篇文章主要介紹了微信小程序 天氣預報開發實例代碼源碼的相關資料,這里含有源碼,需要的朋友可以參考下
    2017-01-01
  • JavaScript的模塊化開發框架Sea.js上手指南

    JavaScript的模塊化開發框架Sea.js上手指南

    Sea.js的目的是追求簡單的代碼書寫和組織方式,Sea.js并沒有過多功能而是主要對前端程序的部署結構作出約束,下面我們就來看一下JavaScript的模塊化開發框架Sea.js上手指南:
    2016-05-05
  • 微信小程序 MD5的方法詳解及實例代碼

    微信小程序 MD5的方法詳解及實例代碼

    這篇文章主要介紹了微信小程序 MD5的方法詳解及實例代碼的相關資料,需要的朋友可以參考下
    2017-03-03
  • 微信小程序 簡單DEMO布局,邏輯,樣式的練習

    微信小程序 簡單DEMO布局,邏輯,樣式的練習

    這篇文章主要介紹了微信小程序 簡單DEMO布局,邏輯,樣式的練習的相關資料,這里寫一個簡單實例練習小程序的布局,并附實例代碼和實現效果圖,需要的朋友可以參考下
    2016-11-11
  • 微信小程序 加載 app-service.js 錯誤解決方法

    微信小程序 加載 app-service.js 錯誤解決方法

    這篇文章主要介紹了微信小程序 加載 app-service.js 錯誤詳解的相關資料,在開發微信小程序過程中出現了app-services.js的錯誤,并解決此問題,需要的朋友可以參考下
    2016-10-10
  • 微信小程序中頂部導航欄的實現代碼

    微信小程序中頂部導航欄的實現代碼

    這篇文章主要介紹了微信小程序中頂部導航欄的實現代碼的相關資料,需要的朋友可以參考下
    2017-03-03

最新評論

美丽人妻被按摩中出中文字幕