【译】Vue 的小奇技(第二篇):衡量 Vue 应用的运行时性能

栏目: JavaScript · 发布时间: 5年前

内容简介:特别声明:本文是作者Alex Jover 发布在VueDose 上的一个系列。版权归作者所有。译者在翻译前已经和作者沟通得到了翻译整个系列的授权。

特别声明:本文是作者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 按钮。

【译】Vue 的小奇技(第二篇):衡量 Vue 应用的运行时性能

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

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

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

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

【译】Vue 的小奇技(第二篇):衡量 Vue 应用的运行时性能

而使用 Object.freeze 方法优化过后的组件耗时 3.9 ms。

【译】Vue 的小奇技(第二篇):衡量 Vue 应用的运行时性能

当然,每次运行的时候耗时数据会有不同,但是两种情况下的耗时同样是相差巨大的。当组件在被创建阶段,暴露出来的响应式问题,能让你看到响应式组件和非响应式组件在初始化阶段的差异。

本文结束。

你可以在线阅读这篇原文,里面有可复制粘贴的源代码。如果你喜欢这个系列的话,请分享给你的同事们!


以上所述就是小编给大家介绍的《【译】Vue 的小奇技(第二篇):衡量 Vue 应用的运行时性能》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web标准之道

Web标准之道

阿一、棕熊、李战、丁学 / 人民邮电出版社 / 2009-8 / 35.00元

《Web标准之道:博客园精华集》由博客园知名博主联手打造,涉及Web标准、HTML/CSS、JavaScript、SEO优化等诸多领域,内容新颖,观点独特,妙语连珠。《Web标准之道:博客园精华集》并不是一本由代码和技巧堆积而成的集合,更多的是探讨了Web设计中若干理念和心得,其中多为经验之谈。无论对于从事Web前端设计的人士,还是对于那些从事Web后端编程的技术人员,《Web标准之道:博客园精华......一起来看看 《Web标准之道》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具