如何渲染10w条数据

分页

利用requestanimationframe

使用createdocumentfragment创建文档碎片

//模拟数据
const getList = () => {
  return new Promise((resolve, reject) => {

  })
}

const renderList=async ()=>{
    const list= await getList()
    let page=0  //当前页数
    const limit=200  //每页数量
    const total=list.length //最大条数
    const totalPage=Math.ceil(total/limit) //向上取整
    递归的时候创建文档流碎片
    const render=(page)=>{
      const fragment = document.createDocumentFragment()//每次
      window.requestAnimationFrame(()=>{
        if (page >= tatalPage)
        return
          for(let i =page*limit;i<page*limit+limit;i++)
              {
                const item =list[i]
                const div=document.createElement('div')
                div.innerHTML = `<img src=${item.src}/><span>${item.text}</span>`
                fragment.appendChild(div)
              }
              container.appendChild(fragment)
              
      })
      render(page + 1)
    }
    render(page)
}