评论

大数据量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


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

5 个评论

  • Admin²⁰²⁰
    Admin²⁰²⁰
    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

    03-25
    赞同 2
    回复 4
    • 何仙姑
      何仙姑
      03-25
      有没有针对普通swiper出什么优化组件?我对这块还真不了解
      03-25
      回复
    • Admin²⁰²⁰
      Admin²⁰²⁰
      03-25回复何仙姑
      没有,但是你可以改改video-swiper组件的源码。
      03-25
      回复
    • 何仙姑
      何仙姑
      03-25回复Admin²⁰²⁰
      我参考下,平时做视频类的不多,还真不知道有这个组件,非常感谢
      03-25
      回复
    • Admin²⁰²⁰
      Admin²⁰²⁰
      03-25
      不过如果你已经有现成的解决方案不建议去折腾了,很费劲。我也是服了
      03-25
      回复
  • Stephen
    Stephen
    03-26

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

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

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

    03-26
    赞同 1
    回复 1
    • 何仙姑
      何仙姑
      03-26
      我可以偷偷告诉你,面膜有增发只功效,一般人我不告诉他
      03-26
      回复
  • undefined
    undefined
    03-25

    觉得你是个女生

    03-25
    赞同 1
    回复 1
    • 何仙姑
      何仙姑
      03-25
      😊
      03-25
      回复
  • 何仙姑
    何仙姑
    03-25

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

    真的很有挑战

    03-25
    赞同 1
    回复 2
    • 0xg
      0xg
      9小时前
      一万个都没问题
      9小时前
      回复
    • 何仙姑
      何仙姑
      2小时前回复0xg
      看好你,写个代码片段,不用一万,1000就够了
      2小时前
      回复
登录 后发表内容