performance对象学习随笔

performance 对象

无意间接触了window下的performance这个对象，通过我的强大的搜索功能，对其有了更加深刻的理解。贴张图，一眼先认识一下：

里面的属性详细介绍一下

1. navigationStart：在同一个浏览器上下文中，前一个网页（与当前页面不一定同域）unload 的时间戳，如果无前一个网页 unload ，则与 fetchStart 值相等
2. unloadEventStart：前一个网页（与当前页面同域）unload 的时间戳，如果无前一个网页 unload 或者前一个网页与当前页面不同域，则值为 0
3. unloadEventEnd：和 unloadEventStart 相对应，返回前一个网页 unload 事件绑定的回调函数执行完毕的时间戳
4. redirectStart：第一个 HTTP 重定向发生时的时间。有跳转且是同域名内的重定向才算，否则值为 0
5. redirectEnd：最后一个 HTTP 重定向完成时的时间。有跳转且是同域名内的重定向才算，否则值为 0
6. fetchStart：浏览器准备好使用 HTTP 请求抓取文档的时间，这发生在检查本地缓存之前
7. domainLookupStart：DNS 域名查询开始的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
8. domainLookupEnd：DNS 域名查询完成的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
9. connectStart：HTTP（TCP） 开始建立连接的时间，如果是持久连接，则与 fetchStart 值相等,如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接开始的时间
10. connectEnd：HTTP（TCP） 完成建立连接的时间（完成握手），如果是持久连接，则与 fetchStart 值相等,如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接完成的时间

注意: 这里握手结束，包括安全连接建立完成、SOCKS 授权通过

11. secureConnectionStart：HTTPS 连接开始的时间，如果不是安全连接，则值为 0
12. requestStart：HTTP 请求读取真实文档开始的时间（完成建立连接），包括从本地读取缓存,连接错误重连时，这里显示的也是新建立连接的时间
13. responseStart：HTTP 开始接收响应的时间（获取到第一个字节），包括从本地读取缓存
14. responseEnd：HTTP 响应全部接收完成的时间（获取到最后一个字节），包括从本地读取缓存
15. domLoading：开始解析渲染 DOM 树的时间，此时 Document.readyState 变为 loading，并将抛出 readystatechange 相关事件
16. domInteractive：完成解析 DOM 树的时间，Document.readyState 变为 interactive，并将抛出 readystatechange 相关事件
    注意:只是 DOM 树解析完成，这时候并没有开始加载网页内的资源
17. domContentLoadedEventStart：DOM 解析完成后，网页内资源加载开始的时间,文档发生 DOMContentLoaded事件的时间
18. domContentLoadedEventEnd：DOM 解析完成后，网页内资源加载完成的时间（如 JS 脚本加载执行完毕），文档的DOMContentLoaded 事件的结束时间
19. domComplete：DOM 树解析完成，且资源也准备就绪的时间，Document.readyState 变为 complete，并将抛出 readystatechange 相关事件
20. loadEventStart：load 事件发送给文档，也即 load 回调函数开始执行的时间,如果没有绑定 load 事件，值为 0
21. loadEventEnd：load 事件的回调函数执行完毕的时间,如果没有绑定 load 事件，值为 0

• timing按照浏览器核心工作轴的顺序
  
  1. 开始计时
     1. startTime
  2. 重定向
     1. redirectStart
     2. redirectEnd
  3. 页面开始加载
     1. navigationStart
  4. 浏览器与服务器连接
     1. fetchStart
     2. domainLookupStart
     3. domainLookupEnd
     4. connectStart
     5. connectEnd
  5. 浏览器与服务器数据交互
     1. secureConnectionStart
     2. requestStart
     3. responseStart
     4. responseEnd
  6. 浏览器DOM解析
     1. domLoading
     2. domInteractive
     3. domContentLoadedEventStart
     4. domContentLoadedEventEnd
     5. domComplete
• 计算出来的参数：
  1. 首屏加载时间：domComplete - navigationStart
  2. 重定向耗时：redirectEnd - redirectStart
  3. DNS解析耗时：domainLookupEnd - domainLookupStart
  4. TCP连接耗时：connectEnd - connentStart
  5. SSL安全连接耗时：connectEnd - secureConnectionStart
  6. 网络请求耗时（TTFB）：responseStart - requestStart
  7. 数据传输耗时：responseEnd - responseStart
  8. DOM解析耗时：loadEventStart - domContentLoadedEventEnd
  9. 首包时间：responseStart - domainLookupStart
  10. 白屏时间：responseEnd - fetchStart
  11. 首次可交互时间：domInteractive - fetchStart
  12. DOM Ready时间：domContentLoadEventEnd - fetchStart
  13. 页面完全加载时间（load）：loadEventStart - fetchStart

performance方法

1. getEntriesByType(type)

   1. 根据资源类型来查看某种类型（entryType）的资源耗时

2. getEntriesByName(name, type)

   1. 根据资源name属性和资源entryType属性来查询指定的静态资源耗时

3. clearResourceTimings()

   1. 该方法无参数无返回值，可以清楚目前所有entryType为"resource"的数据，用于写单页应用的统计脚本非常有用

4. now()

   1. performance.now()是当前时间与performance.timing.navigationStart的时间差，以微秒（百万分之一秒）为单位的时间，与 Date.now()-performance.timing.navigationStart的区别是不受系统程序执行阻塞的影响，因此更加精准。

5. mark(name),measure(name, startMark, endMark),clearMarks(),clearMeasures()

   1. 用于做标记和清除标记，供用户自定义统计一些数据，比如某函数运行耗时等
   2. name:自定义的名称，不要和getEntries()返回的数组中其他name重复
   3. startMark:作为开始时间的标记名称或PerformanceTiming的一个属性
   4. endMark:作为结束时间的标记名称或PerformanceTiming的一个属性
   5. 创建标记：mark(name)；
   6. 记录两个标记的时间间隔：measure(name, startMark, endMark);
   7. 清除指定标记：window.performance.clearMarks(name);
   8. 清除所有标记：window.performance.clearMarks();
   9. 清除指定记录间隔数据：window.performance.clearMeasures(name);
   10. 清除所有记录间隔数据：window.performance.clearMeasures();

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

   1. name：资源名称，是资源的绝对路径或调用mark方法自定义的名称
   2. startTime:开始时间
   3. duration：加载时间，该资源所需的合集时间。与NetWork选项中的Timing中的时间差不多

   4. entryType：资源类型，entryType类型不同数组中的对象结构也不同！具体见下

值	该类型对象	描述
mark	PerformanceMark	通过mark()方法添加到数组中的对象
measure	PerformanceMeasure	通过measure()方法添加到数组中的对象
resource	PerformanceResourceTiming	所有资源加载时间，用处最多
navigation	PerformanceNavigationTiming	现除chrome和Opera外均不支持，导航相关信息
frame	PerformanceFrameTiming	现浏览器均未支持
server	PerformanceServerTiming	未查到相关资料

 // 根据entryType类型返回的不同对象
PerformanceMark:{  //通过mark()方法添加的对象
    entryType："mark"
    name：调用mark()方法时自定义的名字
    startTime: 做标记的时间
    duration：0
}
PerformanceMeasure:{  //通过measure()方法添加的对象
    entryType："measure"
    name：调用measure()方法时自定义的名字
    startTime: 开始量的时间
    duration：标记的两个量的时间间隔
}
PerformanceResourceTiming:{  //可以用来做一个精准的进度条
    entryType："resource"
    name：资源的绝对路径,即URL
    startTime: 即将抓取资源的时间，
    duration： responseEnd - startTime
    initiatorType：略！/:傲娇脸
    //其他属性请参考performance.timing
}
PerformanceNavigationTiming:{
    entryType："navigation"
    name：本页路由，即地址栏看到的地址
    startTime: 0
    duration： loadEventEnd - startTime 
    initiatorType："navigation"
    //其他属性请参考performance.timing
}

5. initiatorType：谁发起的请求，具体见下

发起对象	值	描述
a Element	link/script/img/iframe等	通过标签形式加载的资源，值是该节点名的小写形式
a CSS resourc	css	通过css样式加载的资源，比如background的url方式加载资源
a XMLHttpRequest object	xmlhttprequest	通过xhr加载的资源
a PerformanceNavigationTiming object	navigation	当对象是PerformanceNavigationTiming时返回