Vue中的性能监控——Performance API

FrankChencc

Performance是什么

Performace API允许访问当前页面性能相关的信息,它用于精确度量、控制、增强浏览器的性能表现。这个API为测量网站性能,提供以前没有办法做到的精度。
比如我们想知道,Vue初始化的准确耗时,我们可以使用Date对象的getTime方法,这样去做:

let start = new Date().getTime();

// expose real self
// 初始化核心代码
vm._self = vm
initLifecycle(vm) // $parent/$children等等
initEvents(vm) // 事件监听
initRender(vm) // 插槽、_c...
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm) // 初始化data、prop、method并执行响应式
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created') // 这里可以访问组件状态

let now = new Date().getTime();
let latency = now - start;
console.log("初始化时间:" + latency);

上面这种做法有两个不足之处:

  1. getTime方法(以及Date对象的其他方法)都只能精确到毫秒级别(一秒的千分之一),想要得到更小的时间差别就无能为力了;
  2. 这种写法只能获取代码运行过程中的时间进度,无法知道一些后台事件的时间进度,比如浏览器用了多少时间从服务器加载网页。

为了解决这两个不足之处,ES5引入“高精度时间戳”这个API部署在performance对象上。它的精度可以达到1毫秒的千分之一(1秒的百万分之一),这对于衡量的程序的细微差别,提高程序运行速度很有好处,而且还可以获取后台事件的时间进度。

Performance API提供了很多方便测试我们程序性能的接口,他除了一些上古版本,在现在的主流浏览器中都能兼容,因此很多优秀的框架也用到了这个API进行测试。

Performance属性

先来看看在Chrome浏览器控制台中执行window.performance会出现什么:
image.png
而在Safari下执行是下面这个结果
image.png
简单解释下每个属性的意义

memory

memory是非标准属性,不是所有浏览都会有,它表明了Performance有多少内存。

memory: {

 usedJSHeapSize: 16100000, // JS 对象(包括V8引擎内部对象)占用的内存,一定小于 totalJSHeapSize

 totalJSHeapSize: 35100000, // 可使用的内存

 jsHeapSizeLimit: 793000000 // 内存大小限制

}

timeOrigin

timeOrigin是非标准属性,不是所有浏览都会有,它是一系列时间点的基准点,精确到万分之一毫秒。

timeOrigin: 1589851526166.005

navigation

navigation呈现了如何导航到当前文档的信息,解释了我从哪里来?这个问题

navigation: {

 redirectCount: 0, // 如果有重定向的话,页面通过几次重定向跳转而来

 type: 0 // 0   即 TYPE\_NAVIGATENEXT 正常进入的页面(非刷新、非重定向等)

 // 1   即 TYPE\_RELOAD       通过 window.location.reload() 刷新的页面

 // 2   即 TYPE\_BACK\_FORWARD 通过浏览器的前进后退按钮进入的页面(历史记录)

 // 255 即 TYPE\_UNDEFINED    非以上方式进入的页面

 }

onresourcetimingbufferfull

onresourcetimingbufferfull是一个在resourcetimingbufferfull事件触发时会被调用的event handler 。它的值是一个手动设置的回调函数,这个回调函数会在浏览器的资源时间性能缓冲区满时执行。

function buffer_full(event) {
  console.log("WARNING: Resource Timing Buffer is FULL!");
  performance.setResourceTimingBufferSize(200);
}
function init() {
  // Set a callback if the resource buffer becomes filled
  performance.onresourcetimingbufferfull = buffer_full;
}
<body onload="init()">

上面是MDN官方给的一个example,意思就是当缓冲区满时,执行这个buffer_full函数。

timing

是一系列关键时间点,它包含了网络、解析等一系列的时间数据。我们先来看看关键时间点的时序图:
image
然后我们再来梳理一下每个属性的含义:

timing: {

 // 在同一个浏览器上下文中,前一个网页(与当前页面不一定同域)unload 的时间戳,如果无前一个网页 unload ,则与 fetchStart 值相等

 navigationStart: 1441112691935,

 // 前一个网页(与当前页面同域)unload 的时间戳,如果无前一个网页 unload 或者前一个网页与当前页面不同域,则值为 0

 unloadEventStart: 0,

 // 和 unloadEventStart 相对应,返回前一个网页 unload 事件绑定的回调函数执行完毕的时间戳

 unloadEventEnd: 0,

 // 第一个 HTTP 重定向发生时的时间。有跳转且是同域名内的重定向才算,否则值为 0

 redirectStart: 0,

 // 最后一个 HTTP 重定向完成时的时间。有跳转且是同域名内部的重定向才算,否则值为 0

 redirectEnd: 0,

 // 浏览器准备好使用 HTTP 请求抓取文档的时间,这发生在检查本地缓存之前

 fetchStart: 1441112692155,

 // DNS 域名查询开始的时间,如果使用了本地缓存(即无 DNS 查询)或持久连接,则与 fetchStart 值相等

 domainLookupStart: 1441112692155,

 // DNS 域名查询完成的时间,如果使用了本地缓存(即无 DNS 查询)或持久连接,则与 fetchStart 值相等

 domainLookupEnd: 1441112692155,

 // HTTP(TCP) 开始建立连接的时间,如果是持久连接,则与 fetchStart 值相等

 // 注意如果在传输层发生了错误且重新建立连接,则这里显示的是新建立的连接开始的时间

 connectStart: 1441112692155,

 // HTTP(TCP) 完成建立连接的时间(完成握手),如果是持久连接,则与 fetchStart 值相等

 // 注意如果在传输层发生了错误且重新建立连接,则这里显示的是新建立的连接完成的时间

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

 connectEnd: 1441112692155,

 // HTTPS 连接开始的时间,如果不是安全连接,则值为 0

 secureConnectionStart: 0,

 // HTTP 请求读取真实文档开始的时间(完成建立连接),包括从本地读取缓存

 // 连接错误重连时,这里显示的也是新建立连接的时间

 requestStart: 1441112692158,

 // HTTP 开始接收响应的时间(获取到第一个字节),包括从本地读取缓存

 responseStart: 1441112692686,

 // HTTP 响应全部接收完成的时间(获取到最后一个字节),包括从本地读取缓存

 responseEnd: 1441112692687,

 // 开始解析渲染 DOM 树的时间,此时 Document.readyState 变为 loading,并将抛出 readystatechange 相关事件

 domLoading: 1441112692690,

 // 完成解析 DOM 树的时间,Document.readyState 变为 interactive,并将抛出 readystatechange 相关事件

 // 注意只是 DOM 树解析完成,这时候并没有开始加载网页内的资源

 domInteractive: 1441112693093,

 // DOM 解析完成后,网页内资源加载开始的时间

 // 在 DOMContentLoaded 事件抛出前发生

 domContentLoadedEventStart: 1441112693093,

 // DOM 解析完成后,网页内资源加载完成的时间(如 JS 脚本加载执行完毕)

 domContentLoadedEventEnd: 1441112693101,

 // DOM 树解析完成,且资源也准备就绪的时间,Document.readyState 变为 complete,并将抛出 readystatechange 相关事件

 domComplete: 1441112693214,

 // load 事件发送给文档,也即 load 回调函数开始执行的时间

 // 注意如果没有绑定 load 事件,值为 0

 loadEventStart: 1441112693214,

 // load 事件的回调函数执行完毕的时间

 loadEventEnd: 1441112693215

 }

Performance方法

在刚刚打印出的Performance对象的原型上挂载了很多方法:
image.png
我们再来梳理一下每个方法做了什么事:

getEntries()

浏览器获取网页时,会对网页中每一个对象(脚本文件、样式表、图片文件等等)发出一个HTTP请求。performance.getEntries方法以数组形式,返回这些请求的时间统计信息,有多少个请求,返回数组就会有多少个成员。与 performance.timing对比,它新增了nameentryTypeinitiatorTypeduration属性。

var entry = {  
    // 资源名称,也是资源的绝对路径
    name: "http://cdn.alloyteam.com/wp-content/themes/alloyteam/style.css",
    // 资源类型
    entryType: "resource",
    // 谁发起的请求
    initiatorType: "link", // link 即 <link> 标签
                           // script 即 <script>
                           // redirect 即重定向
    // 加载时间
    duration: 18.13399999809917,
 
    redirectStart: 0,
    redirectEnd: 0,
 
    fetchStart: 424.57699999795295,
 
    domainLookupStart: 0,
    domainLookupEnd: 0,
 
    connectStart: 0,
    connectEnd: 0,
 
    secureConnectionStart: 0,
 
    requestStart: 0,
 
    responseStart: 0,
    responseEnd: 442.7109999960521,
 
    startTime: 424.57699999795295
};

mark() 和 clearMarks()

mark方法用于为相应的视点做标记。它标记各种时间戳,保存为各种测量值,有了这些值我们便可以批量地分析这些数据了。就像在地图上打点一样,有了这些点以后,我们就可以测量地图上的点之间的距离。

let nameStart = 'markStart';
let nameEnd   = 'markEnd';
// 函数执行前做个标记
window.performance.mark(nameStart);
  for (var i = 0; i < n; i++) {
    doSomething
  }
// 函数执行后再做个标记
window.performance.mark(nameEnd);

clearMarks方法用于清除标记,如果不加参数,就表示清除所有标记。

// 只清除markStart对应的PerformanceMark
window.peformance.clearMarks('markStart');
// 清除全部PerformanceMark
window.performance.clearMarks();

getEntriesByName() 和 getEntriesByType()

返回一个PerformanceEntry对象的列表,基于给定的 nameentry type
例如我们可以输出所有保存起来的标记mark

// 看下保存起来的标记 mark
let marks = window.performance.getEntriesByType('mark'); 

console.log(marks);

输出结果:
image

measure() 和 clearMeasures()

有了刚刚mark()方法做的标记,再加上getEntriesByName()获取到它标记的时间戳,我们就可以用measure()测量两个标记间的时间间隔啦。继续刚刚那个例子:

let nameStart = 'markStart';
let nameEnd   = 'markEnd';
// 函数执行前做个标记
window.performance.mark(nameStart);
  for (var i = 0; i < n; i++) {
    doSomething
  }
// 函数执行后再做个标记
window.performance.mark(nameEnd);
// 测量两个标记间的时间间隔
let name = 'functionMeasure';
window.performance.measure(name, nameStart, nameEnd);

// 获取我们自定义的测量
let entries = window.performance.getEntriesByName(name);

当测量完成之后,我就能用getEntriesByName()来获取到我们自定义的测量值。
当然,除了测量自定义的mark,我们还可以用来测量performance.timing里的属性,例如我们要计算domReay的时间:

// domReady 时间
// 直接计算方式
let t = performance.timing 
let domReadyTime = t.domComplete - t.responseEnd; 
console.log(domReadyTime)

// measure方式
window.performance.measure('domReady','responseEnd' , 'domComplete'); 
let domReadyMeasure = window.performance.getEntriesByName('domReady');  
console.log(domReadyMeasure);

clearMeasuresclearMarks方法类似,用于清除测量,如果不加参数,就表示清除所有测量。

// 只清除domReadyMeasure对应的PerformanceMeasure
window.peformance.clearMeasures('domReadyMeasure');
// 清除全部PerformanceMeasure
window.performance.clearMeasures();

Performance在Vue中的应用

在Vue中,有个全局配置performance,当它设置为 true时,可以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补丁的性能追踪。
我们以初始化的代码为例,看看Vue怎么去实现性能追踪的。

  import config from '../config'
  import { mark, measure } from '../util/perf'
  
  Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    // a uid
    vm._uid = uid++

    let startTag, endTag
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
    }

    // 省略一些balabala......
    
    // expose real self
    // 初始化核心代码
    vm._self = vm
    initLifecycle(vm) // $parent/$children等等
    initEvents(vm) // 事件监听
    initRender(vm) // 插槽、_c...
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm) // 初始化data、prop、method并执行响应式
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created') // 这里可以访问组件状态

    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    }

    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
}

我们看到在init核心代码执行之前,会定义两个标记名称startTag, endTag,这个名称跟vue实例的唯一idvm._uid对应。然后会调用mark方法打一个开始标记mark(startTag)。然后等初始化完成之后,会调用mark方法打一个结束标记mark(endTag),接着执行一个测量measure('vue ${vm._name} init', startTag, endTag)
这个两个方法来自于util/perf.js,我来看下具体代码:

import { inBrowser } from './env'

export let mark
export let measure

if (process.env.NODE_ENV !== 'production') {
  const perf = inBrowser && window.performance
  /* istanbul ignore if */
  if (
    perf &&
    perf.mark &&
    perf.measure &&
    perf.clearMarks &&
    perf.clearMeasures
  ) {
    mark = tag => perf.mark(tag)
    measure = (name, startTag, endTag) => {
      perf.measure(name, startTag, endTag)
      perf.clearMarks(startTag)
      perf.clearMarks(endTag)
      // perf.clearMeasures(name)
    }
  }
}

可以看到,这两个方法实际上就是对Performance API方法的一个封装:

  1. mark方法就是直接返回的Performance的mark方法
  2. measure方法是在执行了Performance的measure方法后,把开始结束两个mark值删除。

我们在new Vue之前开启performance这个全局配置,来看看最终的测量效果

if (process.env.NODE_ENV !== 'production') {
    Vue.config.performance = true;
}
// 创建实例
const app = new Vue({
    el: '#demo',
    data:{foo:'foo'}
})

然后我们把保存起来的测量 measure都log出来,就能找到初始化时的耗时。
image.png

参考文献

  1. Performance API
  2. 初探 performance – 监控网页与程序性能
  3. 深入理解前端性能监控—Performance + 腾讯superProfiler(基于Performance API的性能监控工具)
阅读 2.2k
162 声望
7 粉丝
0 条评论
162 声望
7 粉丝
宣传栏