大数据渲染卡顿

createDocumentFragment创建虚拟节点，避免回流，requestAnimationFrame会进入单独线程处理，不影响主线程
 setTimeout(() => {

      // 插入十万条数据

      const total = 100000

      // 一次插入 * 条，如果觉得性能不好就减少

      const once = 200

      // 渲染数据总共需要几次

      const loopCount = total / once

      let countOfRender = 0

      let ul = document.querySelector("ul");

      function add() {

        // 优化性能，插入不会造成回流

        const fragment = document.createDocumentFragment();

        for (let i = 0; i < once; i++) {

          const li = document.createElement("li");

  //  li.innerText = Math.floor(Math.random() * total);

  li.innerText = `这里是第 ${countOfRender} 次的 li ${i}`;

          fragment.appendChild(li);

        }

        ul.appendChild(fragment);

        countOfRender += 1;

        loop();

      }

      function loop() {

        if (countOfRender < loopCount) {

          window.requestAnimationFrame(add);

        }

  }

      loop();

    }, 0);