利用requestAnimationFrame优化大数据列表渲染

狂砍2分4篮板2023-08-03 11:40

当我们拿到一个列表数据进行渲染时，如果数据量比较大，例如下面代码中模拟渲染一万条数据，可以看到很明显的卡顿，隔了几秒才看到列表展示。

js 复制代码

// 模拟返回10000数据
const mockData = () => {
    return Array(10000).fill({
      name: '张三',
      age: 18
    })
}
this.tableData = mockData()

应对这种情况，主流的方案一般采用虚拟滚动进行优化，本文则主要分享一下分片思想 + requestAnimationFrame的优化方式，仅供大家学习了解！

分片思想

大量数据同时渲染，可能会造成浏览器的阻塞导致页面长时间没反应，既然数据大是罪魁祸首，那我们可以尝试将数据分片，即把一份大的数据分成一份一份较小的数据片，分好之后再把逐个将其送给浏览器进行渲染。例如一万条数据，我们可以分成100份，一份100条，每一次只渲染100条，渲染完成后继续执行下一个任务，直至把所有数据渲染完为止。

requestAnimationFrame

requestAnimationFrame(callback)是window下的一个方法，跟setTimeout用法类似，接收一个回调函数，该回调函数会在浏览器下一次重绘之前执行。只不过requestAnimationFrame的时间间隔是由浏览器自己决定的，浏览器为了保证流畅性，重绘频率会与系统刷新率保持一致，如果刷新率是60hz，即表示每秒刷新60次，也就是每次重绘的间隔时间大概是1000ms/60=16.6ms，requestAnimationFrame会跟随浏览器的频率，每16.6ms回调函数就被执行一次，从而避免丢帧卡顿现象。

下面我们通过将数据分片放在requestAnimationFrame里执行渲染，渲染后继续执行下一个分片数据，递归调用直到所有数据渲染完毕。

js 复制代码

const mockData = () => {
    return Array(10000).fill({
      name: '张三',
      age: 18
    })
}
const totalData = mockData()
const pageNum = 100 // 每页条数
const totalPage = Math.ceil(totalData.length / pageNum) // 总共要分成几页
let page = 1
const renderList = () => {
    // 本次要渲染的数据
    const renderData = totalData.slice(
      (page - 1) * pageNum,
      page * pageNum
    )
    this.tableData.push(...renderData)
    page++

    if (page <= totalPage) {
      // 递归调用
      window.requestAnimationFrame(renderList)
    }
}

window.requestAnimationFrame(renderList)

对比效果可以发现同样是加载1万条数据，通过分片渲染的方式可以明显降低延迟或卡顿的现象。