前端大数据渲染

<ul id="ulEl"></ul>
  const total = 10000000

      const once = 20

      const loopCount = Math.ceil(total / once)

      let countRender = 0

      let AnimationId = 0

      function add() {
        const fragEl = document.createDocumentFragment()
        for (let i = 0; i < once; i++) {
          const li = document.createElement('li')
          li.innerHTML = Math.floor(Math.random() * total)
          fragEl.appendChild(li)
        }
        ulEl.appendChild(fragEl)
        countRender++
        loop()
      }

      function loop() {
        if (countRender < loopCount) {
          AnimationId = window.requestAnimationFrame(add)
        }else{
          window.cancelAnimationFrame(AnimationId)
        }
      }

      loop()