Vue应用卡顿该如何排查？

BetaSu commented 2 years ago

用户反馈你们的应用操作起来卡顿，应用是React开发的。

你该如何排查是哪些组件造成性能瓶颈？请写出你的排查步骤

⚠️ 本题的重点是排查组件性能瓶颈，请将重点放在Vue上，而不是通用的性能优化策略

最佳答案

fightZy commented 2 years ago

是不是watch了过多的东西？

是不是deep watch了大对象？

是不是有些watcher之间形成了一些循环嵌套，导致了一些逻辑重复执行？

如何检查：

依赖devtools的performance分析一下，看看卡顿的时候是不是执行了很多notify、update；

即检查是不是有组件内存泄漏的问题，vue组件对象如果销毁后有内存泄漏问题无法被回收，那内存就会逐渐变大，以至于造成卡顿；

以我个人经验，一般造成vue组件内存泄漏的原因普遍是有：

1.在组件中挂载的监听回调等没有在销毁时取消监听；

2.当前组件被外部组件引用；

3.组件内的某些操作污染到全局作用域；

如何检查：

依赖devtools的Memory，在使用有问题的组件前进行一次内存快照（注意：如果组件是懒加载的话需要先让其加载一次，才能再测试时忽略掉组件本身固有的大小），然后多次操作有问题的组件，退出后，点击collect rubbish，手动执行GC，再进行一次内存快照；

这时候我们就可以对比两次内存快照的区别，找出多出来且没有被回收的内容

blackcoffeecat commented 2 years ago

如果表现为：进行某一次操作且数据更新后，页面需要较长的时间才渲染为最新状态（每次操作都会明显滞后，但不影响后续的其他操作需要排查：模版渲染中高频率使用的filter或者函数是否执行耗时较长

如果表现为：进行某一次操作且数据更新后，页面已渲染为最新状态，但在后续一段时间内，用户的操作响应都有明显的滞后需要排查：是否循环触发了同一个watcher/nextTick

NoBey commented 2 years ago

上面说的挺好的, 我来个通用点的

半定位法 (名称来源: OD免杀半定位法) 一次注释掉一半(或者关闭掉一半的代码引用), 然后只看另一半是否会出现问题及时你不知道原因, 也能缩小问题的范围

fxwing commented 2 years ago

渲染前卡：模版中的filter/computed执行时间长渲染后卡：watch中深递归