如何测量vue应用运行时的性能

 更新时间:2019年06月21日 14:36:13   作者:Maya本尊  
这篇文章主要介绍了如何测量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 选项去看统计的性能数据。

结尾

水平有限,难免有错漏之处,望各位大大轻喷的同时能够指出,跪谢!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 如何理解Vue简单状态管理之store模式

    如何理解Vue简单状态管理之store模式

    状态管理也就是数据状态管理,vue应用程序的各组件之间经常需要进行通信,除了v-on、EventBus等通信方式外,可以采用数据共享的方式进行通信。这种简单的数据共享模式就是store模式。
    2021-05-05
  • vue.js+element-ui的基础表单实例代码

    vue.js+element-ui的基础表单实例代码

    这篇文章主要介绍了vue.js+element-ui的基础表单实例代码,技术栈即html+vue.js+element-ui,而使用它们的方法也很简单,引入对应的js和css文件即可,需要的朋友可以参考下
    2024-03-03
  • Vue使用distpicker插件实现省市级下拉框三级联动

    Vue使用distpicker插件实现省市级下拉框三级联动

    这篇文章主要介绍了Vue使用distpicker插件实现省市级下拉框三级联动,比如通过JSON文件生成对应的区域下拉框,element-china-are插件,包括distpicker插件,通过代码讲解如何使用distpicker插件实现省市级三联跳动,需要的朋友可以参考下
    2023-02-02
  • Vite引入虚拟文件的实现

    Vite引入虚拟文件的实现

    本文主要介绍了Vite引入虚拟文件的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 深入探讨Vue计算属性与监听器的区别和用途

    深入探讨Vue计算属性与监听器的区别和用途

    在Vue的开发中,计算属性(Computed Properties)和监听器(Watchers)是两种非常重要的概念,它们都用于响应式地处理数据变化,本文将带你深入了解计算属性和监听器的区别,以及在何时使用它们,感兴趣的朋友可以参考下
    2023-09-09
  • vue组件父与子通信详解(一)

    vue组件父与子通信详解(一)

    这篇文章主要为大家详细介绍了vue组件父与子通信详解,实现登录窗口,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 解决Vue_localStorage本地存储和本地取值问题

    解决Vue_localStorage本地存储和本地取值问题

    这篇文章主要介绍了解决Vue_localStorage本地存储和本地取值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue3使用vue-router的完整步骤记录

    vue3使用vue-router的完整步骤记录

    Vue Router是Vue.js (opens new window)官方的路由管理器,它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌,这篇文章主要给大家介绍了关于vue3使用vue-router的相关资料,需要的朋友可以参考下
    2021-06-06
  • vue 项目中当访问路由不存在的时候默认访问404页面操作

    vue 项目中当访问路由不存在的时候默认访问404页面操作

    这篇文章主要介绍了vue 项目中当访问路由不存在的时候默认访问404页面操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Element中el-form表单举例详解

    Element中el-form表单举例详解

    Form组件提供了表单验证的功能,只需要通过属性传入约定的验证规则,并将Form-Item的属性设置为需校验的字段名即可,下面这篇文章主要给大家介绍了关于Element中el-form表单的相关资料,需要的朋友可以参考下
    2023-01-01

最新评论