先上官网api如下图:performance-0
如若启用performance,先安装google插件(google商店里面):Vue Performance Devtool。
看下源代码哪里控制:默认为false,不启用。
先了解下源码里面有个mark函数:如下图(performance-3)
window.performance是google浏览器自带的检验性能的api。具体使用方法自行google,介绍的很详细。
打开/src/core/instance/init.js里面有这样两处判断:
performance-4新建开始测量标志startTag,performance-5结束标志,而这段时间是在生命周期beforecreate和created之后(如图performance-5,callHook(vm, 'beforeCreate'),callHook(vm, 'created')),所以测量了这两个生命周期运行时间也就是创建实例需要多长时间。这是第一处测量。
看下第二处:在src/core/instance/lifecycle.js文件之中,上图(performance-6)
很明显测量的是vm._render()函数的调用。
vm._render: 函数的作用是调用 vm.$options.render 函数并返回生成的虚拟节点(vnode)。
因此此处测量的是生成虚拟节点的时间。
下一个performance-8:src/platforms/web/entry-runtime-with-compiler.js
很显然测量的是compileToFunctions这个方法,这个方法其实就是编译时长。
至此,这就是performance所用之处,只讲主线,具体测量每个函数里面怎么实现的烦请抽点时间自己看下。