利用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万条数据,通过分片渲染的方式可以明显降低延迟或卡顿的现象。

相关推荐
鼠鼠我捏,要死了捏1 小时前
大规模系统中的分库分表原理深度解析与性能优化实践指南
数据库·性能优化·分库分表
码上暴富1 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
全栈技术负责人2 小时前
Hybrid应用性能优化实战分享(本文iOS 与 H5为例,安卓同理)
前端·ios·性能优化·html5
伍哥的传说2 小时前
Lodash-es 完整开发指南:ES模块化JavaScript工具库实战教程
大数据·javascript·elasticsearch·lodash-es·javascript工具库·es模块·按需导入
@菜菜_达2 小时前
Lodash方法总结
开发语言·前端·javascript
GISer_Jing2 小时前
低代码拖拽实现与bpmn-js详解
开发语言·javascript·低代码
YAY_tyy2 小时前
基于 Vue3 + VueOffice 的多格式文档预览组件实现(支持 PDF/Word/Excel/PPT)
前端·javascript·vue.js·pdf·word·excel
Yvonne爱编码3 小时前
AJAX入门-AJAX 概念和 axios 使用
前端·javascript·ajax·html·js
Pu_Nine_94 小时前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5
顾林海5 小时前
探秘Android JVM TI:虚拟机背后的"隐形管家"
android·面试·性能优化