评论

大数据量swiper滑动优化

大数据量swiper滑动优化

问题场景


事情是这样的,我做了一个在线答题小程序,有一个顺序练习模块,每次顺序练习,都要把整个题库过一遍,每个题库题目数量不一,有的几百,有的上千,为方便讨论,我们假定某个题库1000道题目,

具体答题模块是用swiper来实现的,当swiper的数组很大的时候,setData会有三四秒的延迟,我们都知道setData的效率,但是没想到这么厉害。

问题描述

问题不是swiper本身,而是setData

https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips.html

官方资料

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

功能演示



https://developers.weixin.qq.com/community/develop/article/doc/00040235334788f8651a168d951413

这个问题困扰了我几个周时间,

不敢梳头,因为白头发会掉了一地,不要问我为什么是白头发

不敢照镜子,因为黑眼圈更重了;

不敢出门走路,因为问题没有解决,抬不起头来。


昨天我在群里发了一个有偿征求优化方案,小伙伴很积极,讨论了一个晚上,第二天就有朋友把优化的方案,递给我,今天中午验证有效,亲测。

现在好了,问题得到圆满解决,心情都不一样了,原来处处都是美

解决方案

大家都能想到方案就是分页,虽然总数组长度为1000,但是每次渲染到swiper的可能只有3、5、7不等的小数组,这样通过setData传递到UI层的时候才不会卡。

但是分页的逻辑要我们自己来控制,怎么判断左滑动,怎么判断右滑动,滑动边界问题,很多细节,总之我为了这个问题花了一个周末没有解决,

就是在大方向明确的情况下,还是写不出来。

具体的实现方案晚点我整理下发出来,同时也希望想挑战的同学锻炼下。

在这里特别感谢群里的两位小伙伴

社区相关帖子


https://developers.weixin.qq.com/community/develop/article/doc/000ecafb3486f07000c92c3225c013

https://developers.weixin.qq.com/community/develop/doc/000e4c77da47208296f8b0b4c51800


感谢

@~~娃娃

@~~ dinner


最后一次编辑于  2020-03-25  
点赞 5
收藏
评论

9 个评论

  • Admin ²º²⁴
    Admin ²º²⁴
    2020-03-25

    这个讨论很有意义,相信以后大家都会碰到这个问题。

    微信官方有为此问题做了相应的解决方案组件:

    1、长列表

    recycle-view | 微信开放文档

    https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/recycle-view.html

    2、video-swiper | 微信开放文档

    video-swiper就是优化视频数组量很大的时候用的,是把video固定在swiper里面,如果有需要可以把里面的video换成自己的item

    https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/video-swiper.html

    2020-03-25
    赞同 2
    回复 5
    • 小肥羊🍊
      小肥羊🍊
      2020-03-25
      有没有针对普通swiper出什么优化组件?我对这块还真不了解
      2020-03-25
      回复
    • Admin ²º²⁴
      Admin ²º²⁴
      2020-03-25回复小肥羊🍊
      没有,但是你可以改改video-swiper组件的源码。
      2020-03-25
      1
      回复
    • 小肥羊🍊
      小肥羊🍊
      2020-03-25回复Admin ²º²⁴
      我参考下,平时做视频类的不多,还真不知道有这个组件,非常感谢
      2020-03-25
      回复
    • Admin ²º²⁴
      Admin ²º²⁴
      2020-03-25
      不过如果你已经有现成的解决方案不建议去折腾了,很费劲。我也是服了
      2020-03-25
      回复
    • Tan💛
      Tan💛
      2020-07-13回复Admin ²º²⁴
      想知道大佬用video-swiper组件的时候分页用监控的呢.
      2020-07-13
      回复
  • Stephen
    Stephen
    2020-03-26

    记得早几个月前社区就有相关长列表 setData 的文章发表过。微信官方也出过 recycle-view 长列表的解决方案。

    2020-03-26
    赞同 1
    回复 1
    • 小肥羊🍊
      小肥羊🍊
      2020-03-26
      非常感谢,这块我在社区找找之前的帖子,领悟下,目前该问题已有两个圆满的解决方案。
      2020-03-26
      回复
  • 陈
    2020-03-26

    很棒的文章,就是有一点有问题,熬夜的程序员是没有头发的,所以你是没有头发的,哈哈哈

    2020-03-26
    赞同 1
    回复 1
    • 小肥羊🍊
      小肥羊🍊
      2020-03-26
      我可以偷偷告诉你,面膜有增发只功效,一般人我不告诉他
      2020-03-26
      回复
  • Mr.Zhao
    Mr.Zhao
    2020-03-25

    觉得你是个女生

    2020-03-25
    赞同 1
    回复 1
    • 小肥羊🍊
      小肥羊🍊
      2020-03-25
      😊
      2020-03-25
      回复
  • 小肥羊🍊
    小肥羊🍊
    2020-03-25

    如果有想挑战下的,可以尝试下,很简单的一个场景,数组长度1000,自己模拟下,然后渲染到swiper里面,左右滑动

    真的很有挑战

    2020-03-25
    赞同 1
    回复 5
    • 2020-04-07
      一万个都没问题
      2020-04-07
      回复
    • 小肥羊🍊
      小肥羊🍊
      2020-04-07回复
      看好你,写个代码片段,不用一万,1000就够了
      2020-04-07
      回复
    • 2020-04-08回复小肥羊🍊
      改一下video-swiper就可以了
      2020-04-08
      回复
    • 小肥羊🍊
      小肥羊🍊
      2020-04-08回复
      发个链接,我去了解下
      2020-04-08
      回复
    • 2020-04-08回复小肥羊🍊
      明晚吧,明天要去面试~~
      2020-04-08
      回复
  • Diligent
    Diligent
    02-20

    我也遇到了这种问题,请问楼主可以加那个万能的微信群吗

    02-20
    赞同
    回复
  • 焚楼
    焚楼
    2022-11-15

    有个问题! 楼主这里用的是获取全部的数据,如果是单个获取10个呢? 当滑动到最后一项的时候可以在onchange事件里面发起请求添加数据,但渲染swiper-item的数据发生改变的话,swiper会重置到第一项!!! 求解决!!!!!感谢!!!!!

    2022-11-15
    赞同
    回复
  • 小肥羊🍊
    小肥羊🍊
    2020-04-09

    10来个卡壳,你的问题不在swiper,在富文本组件

    2020-04-09
    赞同
    回复
  • shuffle
    shuffle
    2020-04-09

    楼主好,我最近也做了一款在线答题小程序。有反馈卡壳现象,我是10个来的,也太不经用了吧。(不过,里面是富文本组件)。。。楼主有好的解题思路吗

    2020-04-09
    赞同
    回复 1
    • YZ浩
      YZ浩
      2020-07-07
      你可以试下保证当前swiper,前一个swiper和后一个swiper中的富文本组件显示,其余的都用if来隐藏,这样就保证了一个页面最多只会有三个富文本组件,这样应该能优化下
      2020-07-07
      回复
登录 后发表内容