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

 更新时间:2019-06-25 03:00:56   作者:佚名   我要评论(0)

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


我们可以使用Chrome DevTools 的性能选项来实现这一点。但是为了获

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

我们可以使用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.js中大型数据的性能
  • 使用imba.io框架得到比 vue 快50倍的性能基准
  • 使用异步组件优化Vue应用程序的性能
  • mpvue性能优化实战技巧(小结)
  • 浅谈Vue 性能优化之深挖数组

相关文章

  • Vue多环境代理配置方法思路详解

    Vue多环境代理配置方法思路详解

    背景: 多人协作模式下,修改代理比较麻烦,而且很容易某个开发人员会修改了vue.config.js文件后提交了。 第一,很容易引起冲突。 第二,很容易出现代理错误
    2019-06-25
  • 如何测量vue应用运行时的性能

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

    在上一篇文章中,我们讨论了如何提高大型数据的性能。但是我们还没有测量它提高了多少。 我们可以使用Chrome DevTools 的性能选项来实现这一点。但是为了获
    2019-06-25
  • 详解Webpack如何引入CDN链接来优化编译后的体积

    详解Webpack如何引入CDN链接来优化编译后的体积

    背景 在 Vue 项目中,引入到工程中的所有 js 文件,编译时都会被打包进 vendor.js,也就导致了 vendor.js 文件体积变得相当臃肿,一定程度上影响着页面的渲
    2019-06-25
  • 在JSP页面中动态生成图片验证码的方法实例

    在JSP页面中动态生成图片验证码的方法实例

    在JSP页面中动态生成图片验证码 <%@ page language="java" pageEncoding="utf-8"%> <%@ page import="java.awt.*,java.awt.image.*,com.sun.image.codec.j
    2019-06-25
  • 详解Java中的scala正则表达式

    详解Java中的scala正则表达式

    Scala 通过 scala.util.matching 包中的 Regex 类来支持正则表达式。 eg:使用正则表达式查找单词 Scala 实例中使用 String 类的 r() 方法构造了一个Regex对
    2019-06-25
  • 微信小程序自定义多列选择器使用详解

    微信小程序自定义多列选择器使用详解

    一、预览 微信小程序在自带的表单组件中加入了选择器picker,并给出了常用的时间和省市区三级联动选择器,但日常开发中不可能仅仅使用这些选择器,所以我们在
    2019-06-25
  • 微信小程序实现圆形进度条动画

    微信小程序实现圆形进度条动画

    本文实例为大家分享了微信小程序动画之圆形进度条,供大家参考,具体内容如下 上图: 代码: js: //获取应用实例 var app = getApp() var interval; var
    2019-06-25
  • JSP使用过滤器防止Xss漏洞

    JSP使用过滤器防止Xss漏洞

    在用java进行web业务开发的时候,对于页面上接收到的参数,除了极少数是步可预知的内容外,大量的参数名和参数值都是不会出现触发Xss漏洞的字符。而通常为了避
    2019-06-25
  • JS中超越现实的匿名函数用法实例分析

    JS中超越现实的匿名函数用法实例分析

    本文实例讲述了JS中超越现实的匿名函数用法。分享给大家供大家参考,具体如下: 一般函数: function show1(name){ alert(name); //打印:zhangsan }
    2019-06-25
  • 使用Vue开发自己的Chrome扩展程序过程详解

    使用Vue开发自己的Chrome扩展程序过程详解

    前言 浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务,例如阻止广告,管理密码,组织标签,改变网页的外观和行为等等。 好消
    2019-06-25

最新评论