【JS】前端性能分析之 window.performance

Web Performance 接口允许网页中的 JavaScript 代码可以通过具体的函数（由 window 对象的 performance 属性提供）测量当前网页页面或者 web应用的性能。它能提供高精度的时间戳，可以更加精准的计算脚本运行的时间

效果预览⬇️，参考简书的网页源代码实现，控制台切换成 H5 即可

API

performance对象的timing属性指向一个对象，它包含了各种与浏览器性能有关的时间数据，提供浏览器处理网页各个阶段的耗时。我们在chrome中输入performance.timing就可以看到下面的数据

参数详解，⚠️performance.timing的所有属性都是只读属性

navigationStart：是一个无符号long long 型的毫秒数，表征了从同一个浏览器上下文的上一个文档卸载(unload)结束时的UNIX时间戳。如果没有上一个文档，这个值会和PerformanceTiming.fetchStart相同。
unloadEventStart：是一个无符号long long 型的毫秒数，表征了unload事件抛出时的UNIX时间戳。如果没有前一个网页，或者之前的网页跳转重定向不是在同一个域名内, 这个值会返回0.
unloadEventEnd：是一个无符号long long 型的毫秒数，表征了unload事件处理完成时的UNIX时间戳。如果没有前一个网页，或者之前的网页跳转不是在同一个域名内， 这个值会返回0.
redirectStart：是一个无符号long long 型的毫秒数，表征了第一个HTTP重定向开始时的UNIX时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0.
redirectEnd：是一个无符号long long 型的毫秒数，表征了最后一个HTTP重定向完成时（也就是说是HTTP响应的最后一个bite直接被收到的时间）的UNIX时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0.
fetchStart：是一个无符号long long 型的毫秒数，表征了浏览器准备好使用HTTP请求来获取(fetch)文档的UNIX时间戳。这个时间点会在检查任何应用缓存之前。
domainLookupStart：是一个无符号long long 型的毫秒数，表征了域名查询开始的UNIX时间戳。如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和 PerformanceTiming.fetchStart一致。
domainLookupEnd：是一个无符号long long 型的毫秒数，表征了域名查询结束的UNIX时间戳。如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和 PerformanceTiming.fetchStart一致。
connectStart：返回HTTP请求开始向服务器发送时的Unix毫秒时间戳。如果使用持久连接（persistent connection），则返回值等同于fetchStart属性的值。
(secureConnectionStart)：可选特性。用户代理如果没有对应的东东，就要把这个设置为undefined。如果有这个东东，并且是HTTPS协议，那么就要返回开始SSL握手的那个时间。 如果不是HTTPS， 那么就返回0
connectEnd：返回浏览器与服务器之间的连接建立时的Unix毫秒时间戳。如果建立的是持久连接，则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束。
secureConnectionStart：返回浏览器与服务器开始安全链接的握手时的Unix毫秒时间戳。如果当前网页不要求安全连接，则返回0。
requestStart：返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的Unix毫秒时间戳。
responseStart：返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的Unix毫秒时间戳。
responseEnd：返回用户代理接收到最后一个字符的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。

先看下一个请求发出的整个过程中，各种环节的时间顺序

根据上面这些属性，可以计算出网页加载各个阶段的耗时，对我们比较有用的页面性能数据大概包括如下几个

DNS查询耗时 ：domainLookupEnd - domainLookupStart
TCP链接耗时 ：connectEnd - connectStart
request请求耗时 ：responseEnd - responseStart
解析dom树耗时 ： domComplete - domInteractive
白屏时间 ：responseStart - navigationStart
domready时间 ：domContentLoadedEventEnd - navigationStart
onload时间 ：loadEventEnd - navigationStart

代码实现如下，基于ES6的简单实现

// window.onload = () => setTimeout(getPerformance, 1000)

function getPerformance() {
    if (window.performance) {
      try {
        const [
          timing, start = timing.navigationStart
        ] = [window.performance.timing]
        
        const getTime = key => timing[key + 'End'] - timing[key + 'Start']; 
        const options = {
          times: {
            alltime: timing.loadEventEnd - start,
            lifecycle: [
              { key: 'redirect', desc: '网页重定向的耗时', value: getTime('redirect') },
              { key: "cache", desc: "检查本地缓存的耗时", value: timing.domainLookupStart - timing.fetchStart },
              { key: 'dns', desc: 'DNS查询的耗时', value: getTime('domainLookup') },
              { key: 'tcp', desc: 'TCP连接的耗时', value: getTime('connect') },
              { key: "request", desc: "客户端发起请求的耗时", value: timing.responseStart - timing.requestStart },
              { key: 'response', desc: '服务端响应的耗时', value: getTime('response') },
              { key: 'render', desc: '渲染页面的耗时', value: timing.domContentLoadedEventEnd - start },
            ] // 自定义排序 _0, _1, ...
            .reduce(((c, v, i) => ({ ...c, ['_' + i]: v })), {})
          },
          ua: window.navigator.userAgent
        }
  
        console.log(options)
      } catch (e) {
        console.log(e)
      }
    }
  }

浏览器兼容性

参考资料

1. Window.performance - MDN
2. window.performance - 简书
3. 初探 performance – 监控网页与程序性能