25、前端性能监控

[KFCVme50-CrazyThursday]

25、前端性能监控

[KFCVme50-CrazyThursday]

先上一个图，一个页面从加载到完成的各个过程

[KFCVme50-CrazyThursday]

[KFCVme50-CrazyThursday]

前端性能监控

而前端性能监控便是基于以上数据来进行分析。主要原理便是使用 浏览器 提供的 performance api。window.performance
浏览器中输入 window.performance.timing 便可以得到 页面加载时候各个阶段的起始时间与终止时间，根据这些数据来分析一些关键信息，比如 白屏时间 = 当前时间 - 上一个页面卸载的时间

打印 window.performance.timing 输出主要信息如下：

timing: {
  navigationStart: 1543806782096 // 同一个浏览器上一个页面卸载(unload)结束时的时间戳。如果没有上一个页面，这个值会和fetchStart相同。

  unloadEventStart: 1543806782523 // 上一个页面unload事件抛出时的时间戳。如果没有上一个页面，这个值会返回0。

  unloadEventEnd: 1543806782523 // 和 unloadEventStart 相对应，unload事件处理完成时的时间戳。如果没有上一个页面,这个值会返回0。

  redirectStart: 0 // 第一个HTTP重定向开始时的时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0。

  redirectEnd: 0 // 最后一个HTTP重定向完成时（也就是说是HTTP响应的最后一个比特直接被收到的时间）的时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0.

  fetchStart: 1543806782096 // 浏览器准备好使用HTTP请求来获取(fetch)文档的时间戳。这个时间点会在检查任何应用缓存之前。

  domainLookupStart: 1543806782096 // DNS 域名查询开始的UNIX时间戳。如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和fetchStart一致。

  domainLookupEnd: 1543806782096 //DNS 域名查询完成的时间.如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等

  connectStart: 1543806782099 // HTTP（TCP） 域名查询结束的时间戳。如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和 fetchStart一致。

  connectEnd: 1543806782227 // HTTP（TCP） 返回浏览器与服务器之间的连接建立时的时间戳。如果建立的是持久连接，则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束。

  secureConnectionStart: 1543806782162 // HTTPS 返回浏览器与服务器开始安全链接的握手时的时间戳。如果当前网页不要求安全连接，则返回0。

  requestStart: 1543806782241 // 返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的时间戳。

  responseStart: 1543806782516 // 返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的时间戳。如果传输层在开始请求之后失败并且连接被重开，该属性将会被数制成新的请求的相对应的发起时间。

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

  domLoading: 1543806782573 // 当前网页DOM结构开始解析时（即Document.readyState属性变为“loading”、相应的 readystatechange事件触发时）的时间戳。

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

  domContentLoadedEventStart: 1543806783203 // 当解析器发送DOMContentLoaded 事件，即所有需要被执行的脚本已经被解析时的时间戳。

  domContentLoadedEventEnd: 1543806783216 // 当所有需要立即执行的脚本已经被执行（不论执行顺序）时的时间戳。

  domComplete: 1543806783796 // 当前文档解析完成，即Document.readyState 变为 'complete'且相对应的readystatechange 被触发时的时间戳

  loadEventStart: 1543806783796 // load事件被发送时的时间戳。如果这个事件还未被发送，它的值将会是0。

  loadEventEnd: 1543806783802 // 当load事件结束，即加载事件完成时的时间戳。如果这个事件还未被发送，或者尚未完成，它的值将会是0.
}

各个阶段其实就对应一个页面加载过程的如下阶段：

通过以上数据分析，边可以得到一些有用的信息，主要如下：

//! 页面加载时的关键时间点
{
  // 重定向耗时
  redirect: timing.redirectEnd - timing.redirectStart
  // DOM 渲染耗时
  dom: timing.domComplete - timing.domLoading
  // 页面加载耗时
  load: timing.loadEventEnd - timing.navigationStart
  // 页面卸载耗时
  unload: timing.unloadEventEnd - timing.unloadEventStart
  // 请求耗时
  request: timing.responseEnd - timing.requestStart
  // 获取性能信息时当前时间
  time: new Date().getTime()
  whiteScreen = new Date() - performance.timing.navigationStart
  // 通过 domLoading 和 navigationStart 也可以
  whiteScreen =
    performance.timing.domLoading - performance.timing.navigationStart
}

而白屏时间的计算需要等到页面加载完，放在页面底部：

<script>
    whiteScreen = new Date() - performance.timing.navigationStart
    // 通过 domLoading 和 navigationStart 也可以
    whiteScreen = performance.timing.domLoading - performance.timing.navigationStart
</script>

另外 通过 window.performance.getEntriesByType('resource') 可以获取相关资源（js、css、img...）的加载时间，大小等信息

{
    // 资源的名称
    name: item.name,
    // 资源加载耗时
    duration: item.duration.toFixed(2),
    // 资源大小
    size: item.transferSize,
    // 资源所用协议
    protocol: item.nextHopProtocol,
}

[KFCVme50-CrazyThursday]

通过以上信息分析，提取关键有用信息进行上传即可：

//! 收集性能信息
const getPerformance = () => {
  if (!window.performance) return
  const timing = window.performance.timing
  const performance = {
    redirect: timing.redirectEnd - timing.redirectStart, // 重定向耗时
    whiteScreen: whiteScreen, // 白屏时间
    dom: timing.domComplete - timing.domLoading, // DOM 渲染耗时
    load: timing.loadEventEnd - timing.navigationStart, // 页面加载耗时
    unload: timing.unloadEventEnd - timing.unloadEventStart, // 页面卸载耗时
    request: timing.responseEnd - timing.requestStart, // 请求耗时
    time: new Date().getTime(), // 获取性能信息时当前时间
  }

  return performance
}

//! 获取资源信息
const getResources = () => {
  if (!window.performance) return
  const data = window.performance.getEntriesByType('resource')
  const resource = {
    xmlhttprequest: [],
    css: [],
    other: [],
    script: [],
    img: [],
    link: [],
    fetch: [],
    // 获取资源信息时当前时间
    time: new Date().getTime(),
  }

  data.forEach((item) => {
    const arry = resource[item.initiatorType]
    arry &&
      arry.push({
        name: item.name, // 资源的名称
        duration: item.duration.toFixed(2), // 资源加载耗时
        size: item.transferSize, // 资源大小
        protocol: item.nextHopProtocol, // 资源所用协议
      })
  })
  return resource
}

[KFCVme50-CrazyThursday]

https://fex.baidu.com/blog/2014/05/build-performance-monitor-in-7-days/