10万级数据渲染优化方案

假设我们需要在页面上加载获取到的10万条数据📊，在不采取优化方案的情况下它的耗时为 482 ms

 <div id="container"></div>

 <script>
      const container = document.getElementById('container')
      const getList = () => {
          return new Promise((resolve, reject) => {
              setTimeout(() => {
                  resolve()
              }, 200);
          }).then(() => {
              let arr = []
              for (let i = 0; i < 100000; i++) {
                  arr[i] = { id: i, text: i }
              }
              return arr
          })
      }
      // 不优化情况：
      const renderList = () => {
          getList().then(res => {
              console.time('不优化')
              res.forEach(item => {
                  const div = document.createElement('div')
                  div.innerHTML = `<span>${item.text}</span>`
                  container.appendChild(div)
              });
              console.timeEnd('不优化')
          })
      }
</script>

如果使用了分页优化后的耗时为212 ms

 // 优化情况(分页 + requestAnimationFrame + createDocumentFragment)
const renderList2 = () => {
  console.time('分页优化')
  getList().then(res => {
    const total = res.length // 总条数
    const limit = 10000 // 每页数量
    const page = 0 // 起始页
    const totalPage = Math.ceil(total / limit)

    const render = (page) => {
      if(totalPage<= page)return
      requestAnimationFrame(()=>{ // requestAnimationFrame减少重排
        const fragment = document.createDocumentFragment() // 文档碎片
        for (let i = page * limit; i < page * limit + limit; i++) {
          const item = res[i];
          const div = document.createElement('div')
          div.innerHTML = `<span>${ item.text }</span>`
          fragment.appendChild(div)
        }
        container.appendChild(fragment)
        render(page + 1)
      })
    }
    render(page)
    console.timeEnd('分页优化')
  })
}

如果dom结构更复杂，差距将更大