记一次 vue 性能bug

130 阅读1分钟

起因

最近有用户反馈,某个很久以前写的页面很卡,遂开始优化。

定位

首先用二分排除法,发现某些组件去掉后,性能有明显好转,遂开始进行改造组件,但是没有明显好转。

转换思路,开启火焰图,发现即使去掉页面所有组件,也还是性能红色。发现火焰图中tarverse一直死循环。

然后在composition-api源码中打印日志,并报错(throw error,来显示调用栈)

发现是 代码中watch了全局 store 导致无限 tarverse 进而导致性能问题。

解决

watch 指定state即可。

总结

  1. 加入性能监控,对页面明显卡顿的,做日志上报,早日发现。
  2. 定位性能问题优先使用火焰图 + 源码断点/log 。防止不必要的时间消耗。