chenchenyuyu / chenchenyuyu.github.io

记录点点滴滴
http://cychenyu.com/
2 stars 0 forks source link

performance.timing #101

Open chenchenyuyu opened 5 years ago

chenchenyuyu commented 5 years ago
const getPerformanceLog = () => {
  setTimeout(() => {
    if (!window.performance) return;
    let timing = performance.timing;
    // 统计样式,脚本,图片请求数和消耗时间
    let conf = {
      // DNS解析时间
      dnst: timing.domainLookupEnd - timing.domainLookupStart || 0,
      //TCP建立时间
      tcpt: timing.connectEnd - timing.connectStart || 0,
      // 白屏时间  
      wit: timing.responseStart - timing.navigationStart || 0,
      //dom渲染完成时间
      domt: timing.domContentLoadedEventEnd - timing.navigationStart || 0,
      //页面onload时间
      lodt: timing.loadEventEnd - timing.navigationStart || 0,
      // 页面准备时间 
      radt: timing.fetchStart - timing.navigationStart || 0,
      // 页面重定向时间
      rdit: timing.redirectEnd - timing.redirectStart || 0,
      // unload时间
      uodt: timing.unloadEventEnd - timing.unloadEventStart || 0,
      //request请求耗时
      reqt: timing.responseEnd - timing.requestStart || 0,
      //页面解析dom耗时
      andt: timing.domComplete - timing.domInteractive || 0,
    };
    console.log('entry', conf, timing);
    window.logger.info({
      action: 'entry',
      Performance: conf,
    });
  }, 0);
};

window.addEventListener('load', getPerformanceLog);

loadEventEnd不小于零,为零。 由于导航计时spec指出:'此属性必须返回当前文档的加载事件完成时的时间。当load事件未触发或未完成时,它必须返回零。 因此timing.loadEventEnd - timing.navigationStart将为负数。