分屏渲染技术

早期，我们团队使用了分屏渲染技术，把数据分为首屏和非首屏两部分，首屏渲染完成后再渲染非首屏数据。

分屏渲染最大问题在于，一旦非首屏数据量过大，渲染耗时会很长，让用户等待很长时间，最糟的情况可能引起页面假死，严重影响用户体验。

随着业务增长，这个问题带来的影响已经越来越明显，因此我们开始考虑改用分页技术

难点：业务复杂。短期内无法实现分页请求数据，只能实现纯前端分页。

基本思想

1、一次性请求全部数据 

2、将数据分成若干页，每次只渲染一页 

3、上一页渲染完成后，自动循环渲染下一页

循环渲染实现方案对比

1、通过 setData 递归。setData 的回调函数触发时立刻渲染下一页。缺点是会导致 UI 线程一直忙碌，用户操作响应变慢。

2、利用 setTimeout。setData 回调函数触发时，用 setTimeout 延迟一段时间再渲染下一页。缺点是执行时间不可控。

3、利用时间分片。通过 requestAnimationFrame（简称 raf）实现。调用 raf 之后，浏览器在准备渲染下一帧前会调用你传给 raf 的回调函数。按照帧率为 60fps 来计算，每一帧的间隔在 16.6ms 左右。

通过多次实验对比，最终我们选择时间分片模式。

wxs文件

var time = 1
var rafObserver = function (newValue, oldValue, onwins, ins) {


  console.log('rafObserver')
  ins.requestAnimationFrame(function () {
      ins.callMethod('_requestAnimationFrameCB', ins.getDataset())
    })
}


module.exports = {
  rafObserver: rafObserver
}

js文件

const app = getApp()


Page({
  data: {
    time: 0,
    list: [],
    count: 0
  },
  onLoad: function () {
    // this.testSetData()
  },
  testSetData: function () {
    const data = this.getData()
     this.setData(data, this.testSetData.bind(this))
    // this.setData(data, () => {
    //   setTimeout(this.testSetData, 16.6)
    // })
  },
  _requestAnimationFrameCB: function() {
    console.log('_requestAnimationFrameCB')
    const data = this.getData()
    this.setData(data)
  }, 
  getData: function() {
    const { count, list, time } = this.data
    if (count > 500) return
    const now = Date.now()
    return {
      count: count + 1,
      time: now,
      list: [...list, now - time]
    }
  }
})

wxml文件

<wxs src="./index.wxs" module="utils" />
<button>按钮</button>
<view
    change:prop="{{utils.rafObserver}}" 
    prop="{{time}}"/>
<view>渲染次数:{{count}}</view>
<view>每次渲染耗时：</view>
<view wx:for="{{list}}">{{item}}</view>

实现思路：每次 setData 时触发 wxs 事件监听器，在 wxs 事件处理函数中调用 raf，raf 回调执行时调用逻辑层函数渲染下一页。