如何测量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 相关文章推荐
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
layui树形菜单动态遍历的例子
Sep 23 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中simplexml_load_string使用实例分享
2014/02/13 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
js实现DOM走马灯特效的方法
2015/01/21 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
python实现超市扫码仪计费
2018/05/30 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
金讯Java笔试题目
2013/06/18 面试题
信息管理专业学生自荐信格式
2013/09/22 职场文书
企业行政文员岗位职责
2013/12/03 职场文书
产品销售员岗位职责
2013/12/18 职场文书
个人优缺点自我评价
2014/01/27 职场文书
高中军训感言600字
2014/03/11 职场文书
平安校园建设方案
2014/05/02 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
旷课检讨书范文
2015/01/27 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python