后端API一次返回10万条数据，前端如何处理呢？

一、写在前面
举一个例子，如果我们在前端中需要有几万条数据，当我们同时展示的时候，此时就会出现一个问题，当我们打开浏览器的时候，会出现卡住页面的情况。那么如何可以做到渲染几万条数据不卡的情况。
二、出现这种问题的原因：
浏览器对于每一帧画面的渲染要在在16ms内完成，100000数据要渲染完成的时间远远大于16ms，页面一下子渲染不过来，所以会卡顿
三、解决方法实现

基于上面的原因，我们可以对要展示的数据进行分组，利用window.requestAnimationFrame()函数，
告诉浏览器在下次重绘之前调用指定的回调函数更新动画

const getList = () => {
    return new Promise((resolve, reject) => {
      var ajax = new XMLHttpRequest();
      ajax.open('get', 'http://127.0.0.1:8000');
      ajax.send();
      ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
          resolve(JSON.parse(ajax.responseText))
        }
      }
    })
  }
const renderList = async () => {
    const list = await getList()

    const total = list.length
    const page = 0
    const limit = 200
    const totalPage = Math.ceil(total / limit)

    const render = (page) => {
        if (page >= totalPage) return

        requestAnimationFrame(() => {
            for (let i = page * limit; i < page * limit + limit; i++) {
                const item = list[i]
                const div = document.createElement('div')
                div.className = 'sunshine'
                div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
                container.appendChild(div)
            }
            render(page + 1)
        })
    }
    render(page)
}