快用上PerformanceObserver,别再手动计算首屏时间了

前端阳光

共 2593字,需浏览 6分钟

 ·

2022-04-14 17:43


点击上方 前端阳光,关注公众号

回复加群,加入技术交流群交流群


大家好,我是阳光,今天给大家介绍一个非常好用的浏览器api:PerformanceObserver , 我们可以用它来获取首屏、白屏的时间,就不用再麻烦地手动去计算了。

1介绍

PerformanceObserver 可用于获取性能相关的数据,例如首帧fp首屏fcp首次有意义的绘制 fmp等等。

构造函数

PerformanceObserver()创建并返回一个新的 PerformanceObserver 对象。

提供的方法

PerformanceObserver.observe()

当记录的性能指标在指定的 entryTypes 之中时,将调用性能观察器的回调函数。

PerformanceObserver.disconnect()

停止性能观察者回调接收到性能指标。

PerformanceObserver.takeRecords()

返回存储在性能观察器中的性能指标的列表,并将其清空。

重点我们看看observer.observe(options);

options

一个只装了单个键值对的对象,该键值对的键名规定为 entryTypes。entryTypes 的取值要求如下:

entryTypes 的值:一个放字符串的数组,字符串的有效值取值在性能条目类型 中有详细列出。如果其中的某个字符串取的值无效,浏览器会自动忽略它。

另:若未传入 options 实参,或传入的 options 实参为空数组,会抛出 TypeError。

2实例