<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
PerformanceObserver 可用於獲取效能相關的資料,例如首幀fp、首屏fcp、首次有意義的繪製 fmp等等。
PerformanceObserver()
建立並返回一個新的 PerformanceObserver 物件。
PerformanceObserver.observe()
當記錄的效能指標在指定的 entryTypes 之中時,將呼叫效能觀察器的回撥函數。
PerformanceObserver.disconnect()
停止效能觀察者回撥接收到效能指標。
PerformanceObserver.takeRecords()
返回儲存在效能觀察器中的效能指標的列表,並將其清空。
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)=>{ 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其它相關文章!
相關文章
<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
综合看Anker超能充系列的性价比很高,并且与不仅和iPhone12/苹果<em>Mac</em>Book很配,而且适合多设备充电需求的日常使用或差旅场景,不管是安卓还是Switch同样也能用得上它,希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
除了L4WUDU与吴亦凡已经多次共事,成为了明面上的厂牌成员,吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节,这也是20XXCLUB首次全员合照,王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
目前应用IPFS的机构:1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆,历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
开拓者的车机是兼容苹果和<em>安卓</em>,虽然我不怎么用,但确实兼顾了我家人的很多需求:副驾的门板还配有解锁开关,有的时候老婆开车,下车的时候偶尔会忘记解锁,我在副驾驶可以自己开门:第二排设计很好,不仅配置了一个很大的
2021-06-01 09:30:48
不仅是<em>安卓</em>手机,苹果手机的降价力度也是前所未有了,iPhone12也“跳水价”了,发布价是6799元,如今已经跌至5308元,降价幅度超过1400元,最新定价确认了。iPhone12是苹果首款5G手机,同时也是全球首款5nm芯片的智能机,它
2021-06-01 09:30:45