上一篇笔记中我们介绍了渲染大量数据时如何提高性能，但是到底提高了多少性能呢？
我们可以通过Chrome的开发者工具中的performance来查看。为了能获取准确的数据，我们需要打开Vue的全局配置属性，在 main.js 文件中做如下配置：
Vue.config.performance = true;
或者和 NODE_ENV这个环境变量关联起来，只在非生产环境开启这个配置：
const isDev = process.env.NODE_ENV !== "production";
Vue.config.performance = isDev;
这样Vue会激活 User Timing API ，Vue内部会记录各个组件的渲染性能。
上一篇笔记中,我就已经创建了 codesandbox 代码. 在Chrome开发者工具的performance面板开始录制，并点击reload的按钮:
image
这样就开是记录页面的加载性能了。Vue.config.performance 这个在main.js 中的配置会让我们在整个的记录过程中看到 User Timing 部分。
image
我们可以看到有下面3个关键过程:
- Init: 创建组件实例的时间
- Render: 创建VNode的时间
- Patch: VNode转换成真实的Node的时间
回到我们真正关心的地方，我们上一篇笔记中提到的，正常的组件（不使用Object.freeze）
init 花了 417ms
image
但是不转成响应属性（使用了Object.freeze） 花了3.9ms:
image.png
当然对于这种小的数据对象对于运行时来说节省的时间无异于杯水车薪，但是当渲染大的数据对象时差距就非常明显了。因为在组件创建时转换了响应式属性,所以你会在init 部分看到 响应式 与 非响应式 组件的运行时的区别。
以上就是我们的全部内容了。
原文如下：
Remember you can read this tip online (with copy/pasteable code) and please share VueDose with all your colleagues if you liked it!
See you next week.
