后台接口返回一千多条数据，渲染在页面要四秒，很慢。要怎么优化
发布于 6 年前 作者 fangpan 9880 次浏览 来自 问答
  • 需求的场景描述（希望解决的问题）

接口有一千多条数据，列表渲染在真机上要四秒以上时间。还要求右侧有索引，点击索引能跳到相应的列表位置，类似图片这种，

有什么办法能优化呀，想了很久不知道怎么办？

  • 希望提供的能力
10 回复

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

楼主解决了吗

没准可以试下这个思路：

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

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

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

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

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

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

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

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

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

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

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

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

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

尝试下这里面的

回到顶部