收藏
回答

后台接口返回一千多条数据,渲染在页面要四秒,很慢。要怎么优化

问题模块 框架类型 问题类型 操作系统版本 手机型号 微信版本
客户端 小程序 需求 11 iPhone6s plus 6.7.3

- 需求的场景描述(希望解决的问题)

接口有一千多条数据,列表渲染在真机上要四秒以上时间。还要求右侧有索引,点击索引能跳到相应的列表位置,类似图片这种,
有什么办法能优化呀,想了很久不知道怎么办?

- 希望提供的能力


最后一次编辑于  2018-12-04
回答关注问题邀请回答
收藏

13 个回答

  • waiter
    waiter
    2018-12-06

    没准可以试下这个思路:

    1. 把列表按照右侧索引分争27块,根据数据,算好每块的高度

    2. 列表开始只渲染27个空的view,但是高度是对的

    3. 每个块用和屏幕的相交性来判断显隐(IntersectionObserver


    wx.createIntersectionObserver().relativeToViewport().observe('.regin_A', (res) => {
       this.setData({
          show: true,
       })
    })


    这样可能会让初次渲染快,且能直接跳转到索引处,不过我没试验过


    2018-12-06
    赞同 1
    回复 4
    • 鱼竿
      鱼竿
      2018-12-06

      是在滚动过程中判断每个view的显隐吗,用的scroll-view,只能拿到第一个view的显隐,是不是不能用scroll-view

      2018-12-06
      回复
    • waiter
      waiter
      2018-12-06

      如果用scroll-view ,估计要用 relativeTo,(或者relativeToViewport里面是指上下左右) 具体的各种接口可以看微信文档的:https://developers.weixin.qq.com/miniprogram/dev/api/IntersectionObserver.html


      我去做的话,大体思路会是先包一个组件,用`show`(默认false)来表示是否要渲染细节内容,并在 onReady,创建显隐监听,显示了就让show变为true,这样就会渲染细节内容了。然后外面只要for循环生成27个这样的组件就OK了

      2018-12-06
      1
      回复
    • 鱼竿
      鱼竿
      2018-12-06回复waiter

      谢谢。刚试了一下,渲染很快了。

      2018-12-06
      回复
    • waiter
      waiter
      2018-12-06

      😏

      2018-12-06
      回复
  • 对不起,我瘦不了😂 😂
    对不起,我瘦不了😂 😂
    11-04

    请问楼主是怎么解决的  我也碰到了类似的问题  但我是  循环swiper 数据太多  渲染页面太慢

    11-04
    赞同
    回复
  • smile
    smile
    2018-12-06

    建议用本地文件 进行加载 可以节约请求回显时间

    2018-12-06
    赞同
    回复 2
    • 鱼竿
      鱼竿
      2018-12-06

      不是请求的问题,是数据量太大,用setdata渲染在页面上时间慢,用IntersectionObserver试了下,可以。

      2018-12-06
      回复
    • DD
      DD
      02-15

      请问楼主具体实怎么解决的啊

      02-15
      回复
  • Yoฉันคิดถึง
    Yoฉันคิดถึง
    2018-12-06

    楼主解决了吗

    2018-12-06
    赞同
    回复
  • 烟雨海花 lwl
    烟雨海花 lwl
    2018-12-06

    分包预加载了解一下,你进入小程序首页的时候,分包预加载那个页面,等点到它的时候就很快了,虽然治标不治本,个人觉得比瀑布流的视觉效果好太多

    2018-12-06
    赞同
    回复
  • Lucien
    Lucien
    2018-12-06

    方法一:存一份本地文件,请求回来前用本地的,请求回来后用请求的数据

    方法二:首次请求后写入本地缓存,再次进入用缓存的,网络请求回来后刷新缓存

    2018-12-06
    赞同
    回复 1
    • 鱼竿
      鱼竿
      2018-12-06

      网络请求很快,就是渲染到页面慢了。


      2018-12-06
      回复
  • Tia.
    Tia.
    2018-12-05

    数据写成本地文件不过后台就好了

    2018-12-05
    赞同
    回复
  • 黑白埋
    黑白埋
    2018-12-05

    显示3屏数据,通过定位位置偏移量和每行数据的高度来计算顶部和底部2个空白view的高度或者上下留白

    2018-12-05
    赞同
    回复
  • 迷一样的自信
    迷一样的自信
    2018-12-04

    可以采用setTime来进行异步加载,让他们几个线程同时进行,最后进行setData的渲染,或者说只加载200条或者多少条数据,进行下拉加载,也可以用预加载的形式

    2018-12-04
    赞同
    回复 1
    • 鱼竿
      鱼竿
      2018-12-04

      下拉加载可以做到,就是不知道加上右侧索引要怎么办,没有加载出来的话点索引就没反应了。

      2018-12-04
      回复
  • 仙森ღ₅₂₀¹³¹⁴
    仙森ღ₅₂₀¹³¹⁴
    2018-12-04

    看样子应该是你数据量太大了,调用setData之后觉得卡顿,建议 不要用setData传输太大的数据(可以分块传输) https://mp.weixin.qq.com/debug/wxadoc/dev/framework/performance/tips.html

    尝试下这里面的

    2018-12-04
    赞同
    回复 1
    • 鱼竿
      鱼竿
      2018-12-04

      好的,我看一下。谢谢

      2018-12-04
      回复

正在加载...