美文网首页
Vue.config.performance 以在浏览器开发工具

Vue.config.performance 以在浏览器开发工具

作者: 戴眼镜的松鼠 | 来源:发表于2019-10-17 21:27 被阅读0次

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

performance-0

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

performance-1

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

performance-2

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

performance-3

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

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

performance-4 performance-5

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

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

performance-7

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

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

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

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

performance-8

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

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

相关文章

网友评论

      本文标题:Vue.config.performance 以在浏览器开发工具

      本文链接:https://www.haomeiwen.com/subject/wbctlctx.html