Vue.config.performance 以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补

先上官网api如下图:performance-0

Vue.config.performance 以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补_第1张图片
performance-0

如若启用performance,先安装google插件(google商店里面):Vue Performance Devtool。

performance-1

看下源代码哪里控制:默认为false,不启用。

Vue.config.performance 以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补_第2张图片
performance-2

先了解下源码里面有个mark函数:如下图(performance-3)

Vue.config.performance 以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补_第3张图片
performance-3

window.performance是google浏览器自带的检验性能的api。具体使用方法自行google,介绍的很详细。

打开/src/core/instance/init.js里面有这样两处判断:

Vue.config.performance 以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补_第4张图片
performance-4
Vue.config.performance 以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补_第5张图片
performance-5

performance-4新建开始测量标志startTag,performance-5结束标志,而这段时间是在生命周期beforecreate和created之后(如图performance-5,callHook(vm, 'beforeCreate'),callHook(vm, 'created')),所以测量了这两个生命周期运行时间也就是创建实例需要多长时间。这是第一处测量。

看下第二处:在src/core/instance/lifecycle.js文件之中,上图(performance-6)

Vue.config.performance 以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补_第6张图片
performance-7

很明显测量的是vm._render()函数的调用。

vm._render: 函数的作用是调用 vm.$options.render 函数并返回生成的虚拟节点(vnode)。

因此此处测量的是生成虚拟节点的时间。

下一个performance-8:src/platforms/web/entry-runtime-with-compiler.js

Vue.config.performance 以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补_第7张图片
performance-8

很显然测量的是compileToFunctions这个方法,这个方法其实就是编译时长。

至此,这就是performance所用之处,只讲主线,具体测量每个函数里面怎么实现的烦请抽点时间自己看下。

你可能感兴趣的