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

相关推荐
幸运小圣15 分钟前
Iterator迭代器 【ES6】
开发语言·javascript·es6
葱头的故事16 分钟前
将传给后端的数据转换为以formData的类型传递
开发语言·前端·javascript
中微子26 分钟前
🚀 2025前端面试必考:手把手教你搞定自定义右键菜单,告别复制失败的尴尬
javascript·面试
whyfail1 小时前
React v19.2版本
前端·javascript·react.js
慧慧吖@1 小时前
react基础
前端·javascript·react.js
浪裡遊2 小时前
MUI组件库与主题系统全面指南
开发语言·前端·javascript·vue.js·react.js·前端框架·node.js
Go高并发架构_王工2 小时前
MySQL性能优化案例分析:从问题到解决方案
数据库·mysql·性能优化
软件技术NINI2 小时前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI2 小时前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
Mintopia3 小时前
🛡️ 对抗性攻击与防御:WebAI模型的安全加固技术
前端·javascript·aigc