渲染100000条数据，分时分片执行，页面不卡顿。当一次性插入100000条或者很多数据的时候导致页面卡顿空白，用户体验

<!DOCTYPE html>
<html lang="">
  <head<img src=">" alt="" width="50%" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  </head>
  <body>
    <div class="div-box">
      <!-- <div class="lisy"></div> -->
      <button id="btn">点我插入10000条数据</button>
      <div id="container"></div>
    </div>
    <script>
      const btn = document.getElementById('btn')
      let arr = new Array(100000).fill('').map((_, i) => {
        return i+1
      })

      btn.onclick = function () {

        const taskHandler = function(data, i) {
          let div = document.createElement('div')
          div.innerHTML = data
          document.getElementById('container').append(div)
        }
        performChunk(arr, taskHandler)
      }

      function performChunk(arr, taskHandler, scheduler) {
        if (arr.length === 0) {
          return
        }
        let i = 0;
        function run() {
          if (i>=arr.length) {
            return
          }
          // 浏览器一帧=16.6ms 在这16ms中执行很多任务，包括渲染。可能还会剩下时间 成为空闲时间，requestIdleCallback这个api可以获取空闲时间，在空闲的时间去执行剩余的任务，就可以保证渲染长列表时不会卡顿。
          requestIdleCallback((idle) => {
            while (idle.timeRemaining() > 0 && i < arr.length) {
              taskHandler(arr[i], i)
              i++
            }
            run()
          })
        }
        run()
      }
    </script>
  </body>
</html>