如何测量vue应用运行时的性能
在上一篇文章中,我们讨论了如何提高大型数据的性能。但是我们还没有测量它提高了多少。
我们可以使用Chrome DevTools 的性能选项来实现这一点。但是为了获取准确数据,我们必须在Vue上激活性能模式。
我们可以在main.js或者插件中设置全局变量,代码如下:
Vue.config.performance = true;
如果你设置了正确的 NODE_ENV 环境变量,那么可以使用非生产环境做判断。
const isDev = process.env.NODE_ENV !== "production"; Vue.config.performance = isDev;
这将在Vue内部激活标记组件性能的User Timing API
上一篇文章内容,我已经在codesandbox上创建了代码。打开 Chrome DevTools 里的 performance 选项并且点击重新加载按钮。
这将记录页面加载性能。同时,感谢你在main.js中的Vue.config.performance设置,这个设置会使你在统计资料能够看到User Timing部分。
在哪里,你会发现3个指标:
- Init:创建组件实例需要的时间
- Render:创建VDom结构需要的时间
- Patch:把VDom应用到实际Dom的时间
回到上一篇文章好奇(性能提高了多少)的地方,结果是:正常的组件需要417毫秒初始化:
而使用Object.freeze阻止了默认反应则只需要3.9毫秒:
当然,每次运行的结果都会有小的变化,但是,仍然有非常巨大的性能差别。由于在创建组件的时候会有默认反应的问题,你可以通过Init(初始化指标)看到阻止了默认反应和没有阻止的差异。
就是这样!
我的理解
vue项目,我们可以通过在全局main.js设置Vue.config.performance为true来开启性能检测,可以通过环境变量来区分是否需要开启,然后就可以通过Chrome DevTools里的 performance 选项去看统计的性能数据。
结尾
水平有限,难免有错漏之处,望各位大大轻喷的同时能够指出,跪谢!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Vue3视频播放器组件Vue3-video-play新手入门教程
这篇文章主要给大家介绍了关于Vue3视频播放器组件Vue3-video-play新手入门教程的相关资料,本文实例为大家分享了vue-video-player视频播放器的使用配置,供大家参考,需要的朋友可以参考下2023-12-12Element-ui DatePicker显示周数的方法示例
这篇文章主要介绍了Element-ui DatePicker显示周数的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-07-07antd vue table跨行合并单元格,并且自定义内容实例
这篇文章主要介绍了antd vue table跨行合并单元格,并且自定义内容实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10webpack+vue-cli项目中引入外部非模块格式js的方法
今天小编就为大家分享一篇webpack+vue-cli项目中引入外部非模块格式js的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论