开发背景

需要监控前端页面的一些时间数据和行为数据等。本文主要介绍监控时间数据的框架performance，常常用于前端埋点使用。

实现原理

• 下面重点对此图API做一下说明

  • performance.timing对象

    • navigationStart：当前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。

    • unloadEventStart：如果前一个网页与当前网页属于同一个域名，则返回前一个网页的unload事件发生时的Unix毫秒时间戳。如果没有前一个网页，或者之前的网页跳转不是在同一个域名内，则返回值为0。

    • unloadEventEnd：如果前一个网页与当前网页属于同一个域名，则返回前一个网页unload事件的回调函数结束时的Unix毫秒时间戳。如果没有前一个网页，或者之前的网页跳转不是在同一个域名内，则返回值为0。

    • redirectStart：返回第一个HTTP跳转开始时的Unix毫秒时间戳。如果没有跳转，或者不是同一个域名内部的跳转，则返回值为0。

    • redirectEnd：返回最后一个HTTP跳转结束时（即跳转回应的最后一个字节接受完成时）的Unix毫秒时间戳。如果没有跳转，或者不是同一个域名内部的跳转，则返回值为0。

    • fetchStart：返回浏览器准备使用HTTP请求读取文档时的Unix毫秒时间戳。该事件在网页查询本地缓存之前发生。

    • domainLookupStart：返回域名查询开始时的Unix毫秒时间戳。如果使用持久连接，或者信息是从本地缓存获取的，则返回值等同于fetchStart属性的值。

    • domainLookupEnd：返回域名查询结束时的Unix毫秒时间戳。如果使用持久连接，或者信息是从本地缓存获取的，则返回值等同于fetchStart属性的值。

    • connectStart：返回HTTP请求开始向服务器发送时的Unix毫秒时间戳。如果使用持久连接（persistent connection），则返回值等同于fetchStart属性的值。

    • connectEnd：返回浏览器与服务器之间的连接建立时的Unix毫秒时间戳。如果建立的是持久连接，则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束。

    • secureConnectionStart：返回浏览器与服务器开始安全链接的握手时的Unix毫秒时间戳。如果当前网页不要求安全连接，则返回0。

    • requestStart：返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的Unix毫秒时间戳。

    • responseStart：返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的Unix毫秒时间戳。

    • responseEnd：返回浏览器从服务器收到（或从本地缓存读取）最后一个字节时（如果在此之前HTTP连接已经关闭，则返回关闭时）的Unix毫秒时间戳。

    • domLoading：返回当前网页DOM结构开始解析时（即Document.readyState属性变为“loading”、相应的readystatechange事件触发时）的Unix毫秒时间戳。

    • domInteractive：返回当前网页DOM结构结束解析、开始加载内嵌资源时（即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时）的Unix毫秒时间戳。

    • domContentLoadedEventStart：返回当前网页DOMContentLoaded事件发生时（即DOM结构解析完毕、所有脚本开始运行时）的Unix毫秒时间戳。

    • domContentLoadedEventEnd：返回当前网页所有需要执行的脚本执行完成时的Unix毫秒时间戳。

    • domComplete：返回当前网页DOM结构生成时（即Document.readyState属性变为“complete”，以及相应的readystatechange事件发生时）的Unix毫秒时间戳。

    • loadEventStart：返回当前网页load事件的回调函数开始时的Unix毫秒时间戳。如果该事件还没有发生，返回0。

    • loadEventEnd：返回当前网页load事件的回调函数运行结束时的Unix毫秒时间戳。如果该事件还没有发生，返回0。

• 通过以上API我们可以得到哪些时间指标呢？重要级别按照【※】个数划分

    var performance = window.performance;
    if (!performance) {
      // 当前浏览器不支持
      console.log('你的浏览器不支持 performance');
      return;
    }
    var t = performance.timing;
  
    //【※※※※※】页面加载完成的时间
    loadPage = t.loadEventEnd - t.navigationStart;
  
    //【※※※※※】解析DOM树结构的时间
    domReady = t.domComplete - t.responseEnd;
  
    //【※※※※※】重定向的时间
    redirect = t.redirectEnd - t.redirectStart;
  
    //【※※※※※】DNS查询时间     
    lookupDomain = t.domainLookupEnd - t.domainLookupStart;
  
    //【※※※※※】读取页面第一个字节的时间
    ttfb = t.responseStart - t.navigationStart;
  
    //【※※※※※】内容加载完成的时间
    request = t.responseEnd - t.requestStart;
  
    //【※※※※※】执行onload回调函数的时间
    loadEvent = t.loadEventEnd - t.loadEventStart;
  
    //【※】DNS缓存时间
    appcache = t.domainLookupStart - t.fetchStart;
  
    //【※】卸载页面的时间
    unloadEvent = t.unloadEventEnd - t.unloadEventStart;
  
     //【※】TCP建立连接完成握手的时间
    connect = t.connectEnd - t.connectStart;

其它主要API

• performance.getEntries()

  获取所有资源请求的时间数据,这个函数返回一个按startTime排序的对象数组，数组成员除了会自动根据所请求资源的变化而改变以外，还可以用mark(),measure()方法自定义添加，该对象的属性中除了包含资源加载时间还有以下五个属性。

  • name：资源名称，是资源的绝对路径或调用mark方法自定义的名称
  • startTime:开始时间
  • duration：加载时间
  • entryType：资源类型，entryType类型不同数组中的对象结构也不同 | 值 | 该类型对象 | 描述 | | ------ | ------ | ------ | | mark | PerformanceMark | 通过mark()方法添加到数组中的对象 | | measure | PerformanceMeasure | 通过measure()方法添加到数组中的对象 | | resource | PerformanceResourceTiming | 所有资源加载时间，用处最多| | navigation | PerformanceNavigationTiming |现除chrome和Opera外均不支持，导航相关信息| | frame | PerformanceFrameTiming | 现浏览器均未支持 | | server | PerformanceServerTiming ||
  • initiatorType：谁发起的请求 | 发起对象 | 值 | 描述 | | ------ | ------ | ------ | | a Element | link/script/img/iframe等 | 通过标签形式加载的资源，值是该节点名的小写形式 | | a CSS resourc | css | 通过css样式加载的资源，比如background的url方式加载资源 | | a XMLHttpRequest object | xmlhttprequest |通过xhr加载的资源| | a PerformanceNavigationTiming object | navigation |当对象是PerformanceNavigationTiming时返回|

• performance.navigation对象

提供一些用户行为信息

• performance.navigation.redirectCount

该属性表示当前网页经过了多少次重定向跳转