Tab 组件性能讨论

[Shiki-ARIA]

What problem does this feature solve?

希望官方大大们能优化下tab组件的性能

What does the proposed API look like?

1、双方组件都启用了手势滑动切换，
2、vant的tab组件是静态内容，且渲染的dom节点很少，Nut-ui的tab组件渲染的是200个列表的动态数据。但是通过性能对比可以看到，vant的tab组件消耗的性能远大于Nut-ui。并且经过我实测，vant的tab组件去渲染这动态的200个列表数据，切换的时候整个动画效果很卡很卡，而Nut-ui则依然很流畅。

[chenjiahan]

试了下渲染 1000 个 Cell 组件还是挺流畅的，你可以提供一下对应的 codesandbox 链接吗？

[931149046]

使用真机测试，滑动切换很卡

[Shiki-ARIA]

https://ceshi.yblyr.cn/reception/test
这是我的测试tabs，真的真机上很卡

[Shiki-ARIA]

这是代码：
造成卡顿的原因也跟VanSpace这个组件有很大关系，去掉这个组件，性能会好很多。但是同样的代码用nutui的tab组件的话，不会卡（nutui的tab组件：https://ceshi.yblyr.cn/reception/nutest）。

[Shiki-ARIA]

vant版本是4.6.8

[931149046]

我没有vanspace也很卡

[chenjiahan]

尝试渲染 10 个 Tab 和 3000 个 VanCell 组件，并从第 1 个 Tab 滑动到第 10 个 Tab，渲染开销如下：

Vant

Nut UI

结论

在本 case 下，Vant Tabs 的 rendering 性能相对好一些，未能复现你描述的性能问题。

[Shiki-ARIA]

请问你是在手机上测试的吗？如果是的话，是不是手机性能太好了？

[931149046]

是真机上测的，https://mrylin.gitee.io/lovestatic/test/#/layouts 这个地址

[zhousg]

可以提供一个录屏看看~

[931149046]

这上面我发不来视频啊，你可以测一下就知道了

[931149046]

我感觉是浏览器兼容问题，我苹果手机微信和qq浏览器打开滑动切换测试就很卡，用华为自带浏览器滑动切换就不卡

[Shiki-ARIA]

我个人感觉似乎tabs组件在切换tab进行渲染动画的过程中，似乎还在做什么计算，而且似乎跟vue的双向绑定相关，导致触发了大量了patch事件，从而引起了css动画堵塞。我数了下性能分析中，每一帧的事件中，触发了至少约16次左右的vue3的patch事件，甚至有一帧触发了2次touchmove事件，从而触发了2*16次的 patch事件。这也是性能分析中每次切换tab的时候，cpu消耗性能大的原因吧？

[Shiki-ARIA]

1、下面的vant的Tab组件触发事件，由于触发的事件太多了，我这个屏幕显示不全，截图只是这一帧触发的事件一部分：

2、下面的Nutui的Tab组件触发事件，Nutui每帧执行的事件就比vant的Tab组件触发的事件要少很多：

[Shiki-ARIA]

这是我录制的视频，可以看到vant的tab组件在切换的时候，动画有明显的卡顿。
https://github.com/youzan/vant/assets/83390614/8aa6d1f1-2d58-4c70-b9c2-70347604b67a