页面性能始终是 Web 开发者关心的话题。

Performance 接口通过 JavaScript API 暴露了浏览器内部 的度量指标，允许开发者直接访问这些信息并基于这些信息实现自己想要的功能。

这个接口暴露在 window.performance 对象上。

所有与页面相关的指标，包括已经定义和将来会定义的，都会存在于 这个对象上。

客户端延迟 API

Performance Timeline API 使用一套用于度量客户端延迟的工具扩展了 Performance 接口。

性能度 量将会采用计算结束与开始时间差的形式。

这些开始和结束时间会被记录为 DOMHighResTimeStamp 值，而封装这个时间戳的对象是 PerformanceEntry 的实例。

浏览器会自动记录各种 PerformanceEntry 对象，而使用 performance.mark()也可以记录自定 义的 PerformanceEntry 对象。

1、记录时间点 performance.mark

  1. performance.mark('自定义记录的名字');

以上代码，会在客户端从0开始运行时开始记录开始时间，运行到mark这段代码后记录结束时间，结束时间 - 开始时间 = 页面加载用时。
单位：毫秒

2、获取性能数据 performance.getEntriesByType

标记后的性能指标，会放在一个数组里，通过performance.getEntriesByType(‘mark’) 获取记录的信息。

  1. // 1、记录时间点
  2. performance.mark('start');
  4. setTimeout(() => {
  5.   performance.mark('end');
  7.   // 2、输出记录的性能指标
  8.   console.log(performance.getEntriesByType('mark')[0]);
  9.   console.log(performance.getEntriesByType('mark')[1]);
  10. }, 1000)

image.png

导航时间 API

Navigation Timing API 提供了高精度时间戳，用于度量当前页面加载速度。

浏览器会在导航事件发

生时自动记录 PerformanceNavigationTiming 条目。这个对象会捕获大量时间戳，用于描述页面是 何时以及如何加载的。

image.png

页面加载说明

  1. const [performanceNavigationTimingEntry] = performance.getEntriesByType('navigation'); 
  2. console.log(performanceNavigationTimingEntry);
  4. /*
  5. PerformanceNavigationTiming {
  6. 1、重定向
  7.   // 第一个HTTP重定向开始时的时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0。
  8.   redirectStart: 0 
  10.   // 最后一个HTTP重定向完成时（也就是说是HTTP响应的最后一个比特直接被收到的时间）的时间戳。
  11.   // 如果没有重定向，或者重定向中的一个不同源，这个值会返回0. 
  12.     redirectEnd: 0
  14.   // 如果有重定向的话，页面通过几次重定向跳转而来，默认为0
  15.   redirectCount: 0
  17. 2、缓存
  18.   // 浏览器准备好使用HTTP请求来获取(fetch)文档的时间戳。这个时间点会在检查任何应用缓存之前。
  19.   fetchStart: 0.2750000003288733
  21. 3、DNS解析
  22.     domainLookupStart: 0.2750000003288733 // 解析开始
  23.     domainLookupEnd: 0.2750000003288733 //解析结束
  25. 4、HTTP（TCP）建立连接
  26.     // 建立开始时间
  27.   connectStart: 0.2750000003288733
  29.   // HTTPS 返回浏览器与服务器开始安全链接的握手时的时间戳。如果当前网页不要求安全连接，则返回0
  30.   secureConnectionStart: 0
  32.   // 建立结束时间
  33.   connectEnd: 0.2750000003288733
  35. 5、发送网页资源请求
  36.   // 向服务器发出HTTP请求时（或开始读取本地缓存时）的时间戳
  37.   requestStart: 0.2750000003288733
  39.   // 返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的时间戳。
  40.   //如果传输层在开始请求之后失败并且连接被重开，该属性将会被数制成新的请求的相对应的发起时间。
  41.   responseStart: 0.2750000003288733
  43.   // 返回浏览器从服务器收到（或从本地缓存读取，或从本地资源读取）最后一个字节时
  44.   //（如果在此之前HTTP连接已经关闭，则返回关闭时）的时间戳。
  45.   responseEnd: 1.905000000988366
  47. 6、加载DOM
  48.     // 当前网页DOM结构结束解析、开始加载内嵌资源时（即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时）的时间戳。
  49.     domInteractive: 10.28500000029453
  51.   // 当解析器发送DOMContentLoaded 事件，即所有需要被执行的脚本已经被解析时的时间戳。
  52.     domContentLoadedEventStart: 10.340000000724103
  54.   // 当所有需要立即执行的脚本已经被执行（不论执行顺序）时的时间戳。
  55.   domContentLoadedEventEnd: 10.345000000597793
  57.   // 当前文档解析完成，即Document.readyState 变为 'complete'且相对应的readystatechange 被触发时的时间戳
  58.   domComplete: 10.725000000093132
  60. 7、load事件
  61.     // load事件被发送时的时间戳。如果这个事件还未被发送，它的值将会是0。
  62.     loadEventStart: 10.74500000140688
  64.   // 当load事件结束，即加载事件完成时的时间戳。如果这个事件还未被发送，或者尚未完成，它的值将会是0.
  65.   loadEventEnd: 10.750000001280569
  67. 其他
  68.   decodedBodySize: 0 
  69.   duration: 10.750000001280569
  70.   encodedBodySize: 0
  71.   entryType: "navigation"
  72.   initiatorType: "navigation"
  73.   name: ""
  74.   nextHopProtocol: ""
  75.   serverTiming: []
  76.   startTime: 0
  77.   transferSize: 0
  78.   type: "reload"
  79.   unloadEventEnd: 0
  80.   unloadEventStart: 0
  81.   workerStart: 0
  82. }
  84. */