Vue中的性能监控——Performance API

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);

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

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

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

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

Performance属性

先来看看在Chrome浏览器控制台中执行window.performance会出现什么：

而在Safari下执行是下面这个结果

简单解释下每个属性的意义

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

是一系列关键时间点，它包含了网络、解析等一系列的时间数据。我们先来看看关键时间点的时序图：

然后我们再来梳理一下每个属性的含义：

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对象的原型上挂载了很多方法：

我们再来梳理一下每个方法做了什么事：

getEntries()

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

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对象的列表，基于给定的 name 和 entry type
例如我们可以输出所有保存起来的标记mark

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

console.log(marks);

输出结果：

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);

clearMeasures与clearMarks方法类似，用于清除测量，如果不加参数，就表示清除所有测量。

// 只清除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实例的唯一id：vm._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方法的一个封装：

mark方法就是直接返回的Performance的mark方法
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出来，就能找到初始化时的耗时。

Vue中的性能监控——Performance API

Performance是什么

Performance属性

memory

timeOrigin

navigation

onresourcetimingbufferfull

timing

Performance方法

getEntries()

mark() 和 clearMarks（）

getEntriesByName() 和 getEntriesByType（）

measure() 和 clearMeasures（）

Performance在Vue中的应用

参考文献

FrankChencc

引用和评论

Vue初始化中的initProxy——代理了个寂寞

前端开发工具

开发插件集合

2024最全ECharts 实战大全（速记版+资源）

Vue.js-方法与事件

Vue使用mixins

startViewTransition的简单示例