收藏
回答

setData 性能问题,一次性设置几百条数据,大小 400kb 以上,可有性能优化方案?

客户购物车商品数据,可能会出现几百条商品数据,数据大小经 JSON.stringify 后插件 400 kb 左右。

这个时候 setData 到视图层渲染会很卡,会造成2秒左右的白屏。

问题明确表示数据不能做分页,也就是说接口几百条数据是一次性返回的。

我的临时方案是:先把数据截取前10条 setData ,解决白屏问题,然后 setTimeout 50毫秒后,再把整体数据 setData 赋值过。

上面方案白屏问题是解决了,但是会出现先加载的 10 条数据,这个时候去滑动屏幕也是有个一两秒滑不动(卡住,因为 后面一个 setData 在赋值所有数据)。

我看了下 setData 也没有一个 可以 push 的功能,本想循环拆分多次 setData 。

请问大家有没有类似经验或更好的方案,万分感谢!!!

回答关注问题邀请回答
收藏

4 个回答

  • LIYI
    LIYI
    2022-04-01

    整体来说就是:虚拟DOM + 数据分组渲染

    可以使用https://github.com/wechat-miniprogram/recycle-view,或基于它改造已有视图

    另外,明确表示数据不能做分页,这是为什么?后端不肯配合修改吗

    2022-04-01
    有用
    回复
  • xxKing
    xxKing
    2021-12-02

    这个有两个瓶颈吧,一个是网络请求的时间较长,一个是调用setData渲染的时间较长。

    "问题明确表示数据不能做分页" 这个其实也并没有那边明确,查出来后后端切片返回并没有很高的成本

    其次如果数据上不好处理,那就做前端分页好了,能适当优化setData渲染的效率

    2021-12-02
    有用
    回复 4
    • 蒲硕
      蒲硕
      2021-12-02
      我发现一个很严重的问题,关于 setData,它不能 直接对现有视图的元素 psuh,如果做分页的话,需要自定义一个数组把分页后面页面的数组 push 进去,或者合并数组,然后再把整体的 数据 传到 setData,这里就有一个问题,分页越多的时候一次性传输的数据量就会越大。这感觉很 BUG 啊。
      其实前端做“分页” 也是 基于我前面说的原理。
      2021-12-02
      回复
    • xxKing
      xxKing
      2021-12-02回复蒲硕
      小程序是可以针对数组某一项setData的,也就是说是可以针对增量数据操作的
      2021-12-02
      回复
    • xxKing
      xxKing
      2021-12-02回复蒲硕
      另外可以参考官方的长列表解决方案  https://github.com/wechat-miniprogram/recycle-view
      2021-12-02
      1
      回复
    • 蒲硕
      蒲硕
      2021-12-02回复xxKing
      好的,谢谢
      2021-12-02
      回复
  • 游戏人生
    游戏人生
    2021-12-01

    主流的做法是连续加载更多的“分页加载”

    但是你这个数据量太大了,所以建议你 分段加载,并且不连续,比如第一页是1-100,用户点击后,当前是101-200,而不是1-200

    2021-12-01
    有用
    回复 8
    • 蒲硕
      蒲硕
      2021-12-02
      可不可以分段“一次性”加载,把 setData 放在循环里面,数据每20个分一组,往里面加。但是有个问题,我不知道 setData 对于已经在里面的数据会不会有缓存的概念,如果没有缓存也是白费。
      2021-12-02
      回复
    • 蒲硕
      蒲硕
      2021-12-02回复蒲硕
      setData 没发对已有的元素 数组进行 push,它只能在 setData 之前 做好 push 操作,然后一次性 setData 给到视图层渲染,感觉也是不对的
      2021-12-02
      回复
    • 游戏人生
      游戏人生
      2021-12-02回复蒲硕
      不不不,渲染太大容易内存溢出,但是你引用变量,先全部存起来,可以存很大,比如 let a = 所有的数组,  setData 一部分a[1]  a[2]
      2021-12-02
      回复
    • 蒲硕
      蒲硕
      2021-12-02回复游戏人生
      明白你的意思,我可以将数组拆分。但问题是怎么才能 setData 进去。 比如 前端循环数组是 products,处理的时候就是 this.setData({products: data}),如果我拆分了的话, data[1] data[2] data[3] ... 怎么放进去? 前端 products 就一个数组,没发给他 push
      2021-12-02
      回复
    • 游戏人生
      游戏人生
      2021-12-02回复蒲硕
      楼上说的官方的 recycle-view也是一个方法,思路都是差不多,如果巨大数据,只能分段,你前面说的是具体的分法,这个很多办法呀,比如  this.setData({products: data.slice(101,200)}) 截取数据 101-200
      2021-12-02
      回复
    查看更多(3)
  • 神经蛙
    神经蛙
    2021-12-01

    分页加载啊

    2021-12-01
    有用
    回复
登录 后发表内容