js如何渲染几万条数据并不卡住界面

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>如何渲染几万条数据并不卡住界面</title>
</head>
<body>
  <ul></ul>
  <script>
    //如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条都渲染出来,而应该一次渲染部分 DOM,那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次。
    setTimeout(() => {
      let startTime = 0;
      let endTime = 0;
      //插入10万条数据
      const total = 100000;
      //一次插入20条,如果觉得性能不够好就减少
      const once = 20;
      //渲染数据总共需要几次
      const loopCout = 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);
          fragment.appendChild(li);
        }
        ul.appendChild(fragment);
        countOfRender++;
        loop();
      }
      //16ms 执行一次
      function loop () {
        if (countOfRender < loopCout) {
          window.requestAnimationFrame(add);
        }
        else {
          endTime = new Date().getTime();
          console.log('结束时间:', endTime);
          console.log('执行的时间:', endTime - startTime);
       }
      };
      loop();
      startTime = new Date().getTime();
      console.log('开始时间:', startTime);
    }, 0);
  </script>
</body>
</html>

发布者

cylyiou

cylyiou

分享前端知识

支付宝扫码打赏微信打赏

如果文章对您有帮助,不妨移至上方按钮小额赞助我一下,让我有动力继续写出高质量的教程。

发表评论

电子邮件地址不会被公开。