PerformanceObserver 计算首屏时间

556 阅读1分钟

性能检测对象

callback有两个参数,第一个是性能观察条目列表,第二个是观察者对象

var observer = new PerformanceObserver(callback)
 if (!!PerformanceObserver){
    try {
      if ((PerformanceObserver.supportedEntryTypes || []).includes('paint')) {
        observer = new PerformanceObserver((entryList)=>{
          for(const entry of entryList.getEntriesByName('first-contentful-paint')){
            const { startTime,duration } = entry;
            console.log('[assets-load-monitor] PerformanceObserver fcp:', startTime+duration);
            
            // 上报startTime操作
          }
        });
        observer.observe({
          entryTypes: ['paint],
        });
        return;
      }
    } catch (e) {
      // ios 不支持这种entryTypes,会报错 https://caniuse.com/?search=PerformancePaintTiming
      console.warn('[assets-load-monitor] PerformanceObserver error:', (e || {}).message ? e.message : e);
    }
  }