前端性能监控之Performance

在平时开发项目的时候。尤其是移动端开发, 我们需要知道我们的项目在真实客户使用的过程中,我们的页面白屏耗时, 完全加载耗时, 解析dom树耗时等等一系列的性能指标。然后通过对这些指标的分析,以便我们着手从哪里开始优化项目。如果我们在一开始便不需要借助第三方SDK来帮助我们完成对我们项目的性能优化的时候, 我们便需要自己开发一个类库来帮助我们收集统计这些耗时性能指标。要做前端性能监控, 一般我们会通过Performance API来获取我们所需指标。我们在Chrome控制台输入Performance会得到如下图

我们主要来看Performanc.timing这个对象。

API	描述
connectEnd	返回浏览器与服务器之间的连接建立时的Unix毫秒时间戳。
connectStart	返回HTTP请求开始向服务器发送时的Unix毫秒时间戳。
domComplete	返回当前文档解析完成，即Document.readyState 变为 'complete'且相对应的readystatechange 被触发时的Unix毫秒时间戳。
domContentLoadedEventEnd	返回当所有需要立即执行的脚本已经被执行（不论执行顺序）时的Unix毫秒时间戳。
domContentLoadedEventStart	返回当解析器发送DOMContentLoaded 事件，即所有需要被执行的脚本已经被解析时的Unix毫秒时间戳。
domInteractive	回当前网页DOM结构结束解析、开始加载内嵌资源时（即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时）的Unix毫秒时间戳。
domLoading	返回当前网页DOM结构开始解析时（即Document.readyState属性变为“loading”、相应的 readystatechange事件触发时）的Unix毫秒时间戳。
domainLookupEnd	返回了域名查询结束的UNIX时间戳。
domainLookupStart	返回了域名查询开始的UNIX时间戳。
fetchStart	返回了浏览器准备好使用HTTP请求来获取(fetch)文档的UNIX时间戳。
loadEventEnd	返回当load事件结束，即加载事件完成时的Unix毫秒时间戳。
loadEventStart	返回load事件被发送时的Unix毫秒时间戳。
navigationStart	返回了从同一个浏览器上下文的上一个文档卸载(unload)结束时的UNIX时间戳。
redirectEnd	返回了最后一个HTTP重定向完成时（也就是说是HTTP响应的最后一个比特直接被收到的时间）的UNIX时间戳。
redirectStart	返回了第一个HTTP重定向开始时的UNIX时间戳。
requestStart	返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的Unix毫秒时间戳。
responseEnd	返回浏览器从服务器收到（或从本地缓存读取，或从本地资源读取）最后一个字节时（如果在此之前HTTP连接已经关闭，则返回关闭时）的Unix毫秒时间戳。
responseStart	返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的Unix毫秒时间戳。
secureConnectionStart	返回浏览器与服务器开始安全链接的握手时的Unix毫秒时间戳。
unloadEventEnd	返回了unload事件处理完成时的UNIX时间戳。
unloadEventStart	返回了unload事件抛出时的UNIX时间戳。

有了Performance.timing这个API, 我们便可以通过它的属性来计算我们需要的性能指标了。常用的指标有：

const timing = Performance.timing
let performanceTiming = {
  dnsTimer: {
    key: 'DNS查询耗时',
    value: timing.domainLookupEnd - timing.domainLookupStart
  },
  tcpTimer: {
    key: 'TCP链接耗时',
    value: timing.connectEnd - timing.connectStart
  },
  requestTimer: {
    key: 'request请求耗时',
    value: timing.responseEnd - timing.responseStart
  },
  domTimer: {
    key: '解析dom树耗时',
    value: timing.domComplete - timing.domInteractive
  },
  pageEmptyTimer: {
    key: '白屏时间',
    value: timing.responseStart - timing.navigationStart
  }
}

然后我们便可将这些指标上报到我们的服务器。我们便可通过分析这些指标来处理我们项目存在的问题。需要主要的是, 在计算这些指标的时机, 最好是在整个页面加载完成之后, 即写在window.onload函数里面。这样的话取到的performance.timing是比较准确的。在我们从服务端取到上报的数据之后, 我们最好有一个后台系统来展示整个数据, 如果不想这么麻烦的话, 也可以选择第三方性能监控工具, 我们之前有用到听云就是一个不错的性能监控平台。性能监控这块因人而异, 如果只需要拿到几个指标, 就只需要用Performance便可以轻松完成我们的需求, 如果对性能监控需求较细致的话, 个人建议还是使用第三方工具🙉。