资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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

在上一篇文章中,我们讨论了如何提高大型数据的性能。但是我们还没有测量它提高了多少。

创新互联建站是专业的青岛网站建设公司,青岛接单;提供成都做网站、成都网站建设、成都外贸网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行青岛网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

我们可以使用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 选项并且点击重新加载按钮。

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

这将记录页面加载性能。同时,感谢你在main.js中的Vue.config.performance设置,这个设置会使你在统计资料能够看到User Timing部分。

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

在哪里,你会发现3个指标:

  • Init:创建组件实例需要的时间
  • Render:创建VDom结构需要的时间
  • Patch:把VDom应用到实际Dom的时间

回到上一篇文章好奇(性能提高了多少)的地方,结果是:正常的组件需要417毫秒初始化:

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

而使用Object.freeze阻止了默认反应则只需要3.9毫秒:

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

当然,每次运行的结果都会有小的变化,但是,仍然有非常巨大的性能差别。由于在创建组件的时候会有默认反应的问题,你可以通过Init(初始化指标)看到阻止了默认反应和没有阻止的差异。

就是这样!

我的理解

vue项目,我们可以通过在全局main.js设置Vue.config.performance为true来开启性能检测,可以通过环境变量来区分是否需要开启,然后就可以通过Chrome DevTools里的 performance 选项去看统计的性能数据。

结尾

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

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


名称栏目:如何测量vue应用运行时的性能
URL标题:http://www.cdkjz.cn/article/pgedcc.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220