性能测试工具
Chrome performance 工具
需要打开 vue 的 performance 后组件的性能情况才会被 chrome performance 工具记录。
1 | vue.config.performance = true; |
示例
初次进入页面，然后打开 chrome performance 工具，点击左上角 reload 按钮，几秒钟后我们就能看到初次渲染的性能情况。主要关注工具中的 Timings，找到对应组件查看不同阶段性能情况，可以看到有三个指标：
- Init：创建组件实例需要的时间
- Render：创建VDom结构需要的时间
- Patch：把VDom应用到实际Dom的时间
缺点
使用起来稍微麻烦一点，没有 Vue Devtool 直观。
Vue Devtool（推荐）
Vue Devtool 有一个 Performance 页，可以检测组件的性能。
使用方法
- 进入
performance页，并选中Component render标签 - 点击
start按钮就开始记录，然后点击侧边栏中对呀组件查看性能情况。
缺点
如果 Vue Devtool 当前处于记录状态，此时刷新页面插件就会崩坏，这给我们测试组件出初次渲染的性能增加了难度。
但也是有办法补救，一种是初次渲染通过 chrome performance 工具来测试，另一种就是先将目标组件隐藏（v-if = false），然后点击 start 按钮再将目标组件显示（v-if=true）就能测得初次渲染性能