按需渲染优化

在很多业务场景中,小程序渲染的页面的高度是超过一屏的。但在首次进入页面时,只需渲染出可视范围的内容即可。当页面首次渲染完毕后,再继续异步渲染剩下的页面内容。

# 如何按需渲染优化

我们以长列表应用场景为例,说明如何按需渲染:

首先,获取当前可使用窗口高度,计算需要展示的列表数目。可以通过getSystemInfoSync获取当前的视口高度,假设每行列表的高度固定。计算该视口下可展示的列表数目。

其次,渲染上一步计算出的数目的列表。首次渲染时,仅展示首屏可见的列表,在setData的回调中,渲染剩余的数据。

// 1. 渲染首屏数据
this.setData({
  list: list.slice(0, listNum)
}, () => {
  // 2. 在回调中渲染其他的数据
  this.setData({list});
})
未优化
优化后

以上是在极端测试条件下的结果,在实际使用中效果可能相对不明显。