渲染几万条数据，如何才能页面不卡

最新推荐文章于 2024-08-14 15:45:18 发布

迷失的羔羊over

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量169

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_38427709/article/details/130747353

版权

使用Document.createDocumentFragment。
DocumentFragments (en-US) 是 DOM 节点。它们不是主 DOM 树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到 DOM 树。在 DOM 树中，文档片段被其所有的子元素所代替。

因为文档片段存在于内存中，并不在 DOM 树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。 -MDN

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>控件</ul>
  <script>
    setTimeout(() => {
      // 总条数
      const total = 100;
      // 单次渲染数量
      const once = 20;
      // 渲染总次数
      const loopCount = total / once;
      // 当前渲染次数
      let renderCount = 0;
      // dom
      let ul = document.querySelector('ul');

      const 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);
        }
        renderCount++;
        ul.appendChild(fragment);
        loop();
      }

      const loop = () => {
        if (renderCount < loopCount) {
          window.requestAnimationFrame(add);
        }
      };

      loop();
    }, 0);
  </script>
</body>

</html>