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

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

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

结尾

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

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