如何测量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 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
[原创]站长必须要知道的javascript广告代码
May 30 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
Vue项目中跨域问题解决方案
Jun 05 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
javascript实现简单留言板案例
Feb 09 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脚本数据库功能详解(中)
2006/10/09 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
php单链表实现代码分享
2016/07/04 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
python调用新浪微博API项目实践
2014/07/28 Python
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
Python切换pip安装源的方法详解
2016/11/18 Python
python读取和保存视频文件
2018/04/16 Python
python实现桌面壁纸切换功能
2019/01/21 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
python爬虫基础之urllib的使用
2020/12/31 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
Prototype是怎么扩展DOM的
2014/10/01 面试题
公司市场部岗位职责
2013/12/02 职场文书
委托协议书范本
2014/04/22 职场文书