后端一次性返回万条数据，前端不做分页如何渲染

1、存储请求的元数据

const sourceList

2、定义一个渲染数组

const listData = []

3、按指定条数向渲染数组添加数据

let page = 0
listData = listData.concat(sourceList.slice(20 * page, 20 * (page + 1)))

4、设计添加数据的规则，如使用定时器，每隔20ms执行一次

function dealFn() {
    listData = listData.concat(sourceList.slice(20 * page2, 20 * (page2 + 1)))
    page2++
    if (sourceList.length / 20 > page2) {
        setTimeout(() => {
            dealFn()
        }, 20)
    }
}

dealFn()

使用setTimeout时，发现鼠标滚动较快时，还是会出现白屏的情况。打印执行时间会发现，setTimeout并不是严格按照指定的20ms间隔去执行，会超过这个时间，这个和事件循环机制有一定关系，会被其它任务阻塞延迟。
5、使用requestAnimationFrame实现一致，它的渲染频率会和浏览器刷新频率一致

function dealFn() {
    console.log('requestAnimationFrame', page)
    listData = listData.concat(sourceList.slice(20 * page, 20 * (page + 1)))
    page++
    if (sourceList.length / 20 > page) {
        requestId = requestAnimationFrame(dealFn)
        // dealFn()
    }
}

requestId = requestAnimationFrame(dealFn)

如果数据过大，在页面退出时还没有渲染完全，可手动停止

// 停止未完成的渲染
function stop() {
    cancelAnimationFrame(requestId)
}