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

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

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.6msrequestAnimationFrame会跟随浏览器的频率,每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万条数据,通过分片渲染的方式可以明显降低延迟或卡顿的现象。

相关推荐
重生之我是菜鸡程序员19 分钟前
uniapp 顶部通知 上滑隐藏
前端·javascript·uni-app
fox_1 小时前
JS: 实现扁平化函数 flat
javascript
剽悍一小兔1 小时前
小程序到底用Store还是LocalStorage ?
javascript
一只小风华~1 小时前
学习笔记:Vue Router 中的链接匹配机制与样式控制
前端·javascript·vue.js·笔记·学习·ecmascript
uhakadotcom2 小时前
在chrome浏览器插件之中,options.html和options.js常用来做什么事情
前端·javascript·面试
西瓜树枝2 小时前
Chrome 扩展开发从入门到实践:以 Cookie 跨页提取工具为例,拆解核心模块与交互逻辑
前端·javascript·chrome
冰糖雪梨dd2 小时前
JS中new的过程发生了什么
开发语言·javascript·原型模式
小帆聊前端3 小时前
Lodash 深度解读:前端数据处理的效率利器,从用法到原理全拆解
前端·javascript
一枚前端小能手3 小时前
🔍 那些不为人知但是好用的JS小秘密
前端·javascript
北城以北88884 小时前
Vue-- Axios 交互(二)
javascript·vue.js·交互