- 原文地址: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。
而使用 Object.freeze
方法优化过后的组件耗时 3.9 ms。
当然,每次运行的时候耗时数据会有不同,但是两种情况下的耗时同样是相差巨大的。当组件在被创建阶段,暴露出来的响应式问题,能让你看到响应式组件和非响应式组件在初始化阶段的差异。
本文结束。
你可以在线阅读这篇 原文,里面有可复制粘贴的源代码。如果你喜欢这个系列的话,请分享给你的同事们!
结语
此系列的其他文章,会同步系列官网的发布情况,及时地翻译发布到掘金。请持续关注「程序猿何大叔」,相信我会给大家带来更多优质的内容,不要忘了点赞~
如果想要了解我的更多,请查阅如下:
- 个人博客:blog.hadesz.com
- 个人 github 仓库:github.com/hadeshe93
- 个人微信公众号:搜索「程序猿何大叔」