• 原文地址： Measure runtime performance in Vue apps
• 原文作者： Alex Jover
• 译者： 程序猿何大叔

特别声明：本文是作者 Alex Jover 发布在 VueDose 上的一个系列。

版权归作者所有。

译者在翻译前已经和作者沟通得到了翻译整个系列的授权。

为了不影响大家阅读，获得授权的记录会放在本文的最后。

在上一篇文章中我们谈到了如何提高大型列表数据的性能，但是我们没有测试过这个小技巧到底带来多少的性能优化。

我们可以通过 Chrome 浏览器的 DevTools 工具中的 Performance 标签页，来完成我们想要的测量工作。为了能够获得准确的数据，我们需要在 Vue 应用中开启「性能追踪」模式。

我们可以在 main.js 文件中进行全局配置，或者在 Nuxt 的场景下，于插件中进行设置：

Vue.config.performance = true;
复制代码

又或者你的环境变量 NODE_NEV 是保持设置准确的话，也可以使用它在非生产环境来开启「性能追踪」模式：

const isDev = process.env.NODE_ENV !== "production";
Vue.config.performance = isDev;
复制代码

以上操作会让 Vue 内部启用 User Timing API 来对组件进行性能追踪。

在上一篇文章中，我创建了这个 沙箱环境 。打开 Chrome 开发者工具的 Performance 面板，并点击如下这个 reload 按钮。

它会记录页面加载过程的性能，并且由于我们之前在 main.js 设置了 Vue.config.performance ，你在 profiling 中能够看到 User Timing 的一段。

在这你能够找到 3 个度量项：

• Init : 创建组件实例所耗时间
• Render : 创建虚拟 DOM 所耗时间
• Patch : 渲染虚拟 DOM 为真实 DOM 所耗时间

继续，在上一篇文章《[译] Vue 的小奇技（第一篇）：提高大型数据列表的性能》中，未经优化的组件初始化耗时 417 ms。