公告列表
公告列表
收藏
回答

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
    有用
    回复
请 登录 后发表内容
相关问题
相关文档