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


Posted in Javascript onJune 21, 2019

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

我们可以使用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 选项去看统计的性能数据。

结尾

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

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

Javascript 相关文章推荐
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
bootstrap table表格使用方法详解
Apr 26 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
理顺8个版本vue的区别(小结)
Sep 17 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 #Javascript
如何提升vue.js中大型数据的性能
Jun 21 #Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 #Javascript
微信小程序实现点击效果
Jun 21 #Javascript
JS利用prototype给类添加方法操作详解
Jun 21 #Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 #Javascript
微信小程序实现弹出菜单动画
Jun 21 #Javascript
You might like
php 保留字列表
2012/10/04 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
PHP排序算法类实例
2015/06/17 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
微信小程序开发入门基础教程
2017/04/19 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
Python判断操作系统类型代码分享
2014/11/22 Python
Python最长公共子串算法实例
2015/03/07 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
Django-imagekit的使用详解
2020/07/06 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
python实现图片素描效果
2020/09/26 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
高分子材料与工程专业个人求职信
2013/12/15 职场文书
教学大赛获奖感言
2014/01/15 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
应聘教师自荐书
2014/06/16 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
专家推荐信范文
2015/03/26 职场文书
倡议书怎么写?
2019/04/11 职场文书
Python实现Hash算法
2022/03/18 Python