search

didi / cube-ui

:large_orange_diamond: A fantastic mobile ui lib implement by Vue
https://didi.github.io/cube-ui/
Apache License 2.0
9.14k stars 1.47k forks source link

RecycleList 性能在移动端很差，向下滑动快了上面就有白屏出现 #767

Open fantasy525 opened 3 years ago

fantasy525 commented 3 years ago

RecycleList 性能在手机移动端很差，向下滑动快了上面就有白屏出现 另外在谷歌浏览器性能调试面板发现，滑动时候，js占用，加上渲染占用时间都二三十ms了，这帧率不会下降吗？考虑不用原生的滚动，而接入bs scroll吗？原生的滚动速度太快，移动端浏览器压根跟不上滑动速度

dolymood commented 3 years ago

白屏并不是性能差的表现，而是浏览器原生为了应对这种情况 所做的性能优化

性能面板的话，是可以考虑根据实际情况进一步优化的

fantasy525 commented 2 years ago

@theniceangel 能否考虑使用better-scroll替换浏览器原生的滚动，白屏的主要原因是浏览器触发用户滚动事件出发太快，但是渲染跟不上，如果能使用better-scroll限制住滚动速度的话猜测会缓解这个问题

dolymood commented 2 years ago

@fantasy525

https://github.com/ustbhuangyi/better-scroll 2.x提供了infinite插件 可以实现

这块也有示例 https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/examples/vue/components/infinity/default.vue

可以参考使用