- 需求的场景描述（希望解决的问题）
接口有一千多条数据，列表渲染在真机上要四秒以上时间。还要求右侧有索引，点击索引能跳到相应的列表位置，类似图片这种，
有什么办法能优化呀，想了很久不知道怎么办？
- 希望提供的能力
收藏
回答
置顶后台接口返回一千多条数据，渲染在页面要四秒，很慢。要怎么优化精选热门
鱼竿2018-12-04
| 框架类型 | 问题类型 | 操作系统版本 | 手机型号 | 微信版本 |
|---|---|---|---|---|
| 小程序 | 需求 | 11 | iPhone6s plus | 6.7.3 |
相关问题
| 框架类型 | 问题类型 | 操作系统版本 | 手机型号 | 微信版本 |
|---|---|---|---|---|
| 小程序 | 需求 | 11 | iPhone6s plus | 6.7.3 |
- 需求的场景描述（希望解决的问题）
接口有一千多条数据，列表渲染在真机上要四秒以上时间。还要求右侧有索引，点击索引能跳到相应的列表位置，类似图片这种，
有什么办法能优化呀，想了很久不知道怎么办？
- 希望提供的能力
没准可以试下这个思路：
把列表按照右侧索引分争27块，根据数据，算好每块的高度
列表开始只渲染27个空的view，但是高度是对的
每个块用和屏幕的相交性来判断显隐（IntersectionObserver）
wx.createIntersectionObserver().relativeToViewport().observe('.regin_A', (res) => {this.setData({show:true,})})这样可能会让初次渲染快，且能直接跳转到索引处，不过我没试验过
是在滚动过程中判断每个view的显隐吗，用的scroll-view，只能拿到第一个view的显隐，是不是不能用scroll-view
如果用scroll-view ，估计要用 relativeTo，（或者relativeToViewport里面是指上下左右） 具体的各种接口可以看微信文档的：https://developers.weixin.qq.com/miniprogram/dev/api/IntersectionObserver.html
我去做的话，大体思路会是先包一个组件，用`show`（默认false）来表示是否要渲染细节内容，并在 onReady，创建显隐监听，显示了就让show变为true，这样就会渲染细节内容了。然后外面只要for循环生成27个这样的组件就OK了
谢谢。刚试了一下，渲染很快了。
😏
请问楼主是怎么解决的 我也碰到了类似的问题 但我是 循环swiper 数据太多 渲染页面太慢
建议用本地文件 进行加载 可以节约请求回显时间
不是请求的问题，是数据量太大，用setdata渲染在页面上时间慢，用IntersectionObserver试了下，可以。
请问楼主具体实怎么解决的啊
楼主解决了吗
分包预加载了解一下，你进入小程序首页的时候，分包预加载那个页面，等点到它的时候就很快了，虽然治标不治本，个人觉得比瀑布流的视觉效果好太多
方法一：存一份本地文件，请求回来前用本地的，请求回来后用请求的数据
方法二：首次请求后写入本地缓存，再次进入用缓存的，网络请求回来后刷新缓存
网络请求很快，就是渲染到页面慢了。
数据写成本地文件不过后台就好了
显示3屏数据，通过定位位置偏移量和每行数据的高度来计算顶部和底部2个空白view的高度或者上下留白
可以采用setTime来进行异步加载,让他们几个线程同时进行,最后进行setData的渲染,或者说只加载200条或者多少条数据,进行下拉加载,也可以用预加载的形式
下拉加载可以做到，就是不知道加上右侧索引要怎么办，没有加载出来的话点索引就没反应了。
看样子应该是你数据量太大了，调用setData之后觉得卡顿，建议 不要用setData传输太大的数据（可以分块传输） https://mp.weixin.qq.com/debug/wxadoc/dev/framework/performance/tips.html
尝试下这里面的
好的，我看一下。谢谢