zoukankan      html  css  js  c++  java
  • 如何渲染几万条数据并不卡住界面?

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

    如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条 都渲染出来,而应该一次渲染部分 DOM,那么就可以通过 requestAnimationFrame 来 每 16 ms 刷新一次。

    <!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>Document</title>
    </head>
    <body>
     <ul>控件</ul>
     <script>
        setTimeout(() => {
           // 插入十万条数据
          const total = 100000
          // 一次插入 20 条,如果觉得性能不好就减少
          const once = 20
          // 渲染数据总共需要几次
         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);
            fragment.appendChild(li);
          }
         ul.appendChild(fragment);
         countOfRender += 1;
         loop();
      }
      function loop() {
          if (countOfRender < loopCount) {
           window.requestAnimationFrame(add);
       }
      }
      loop();
      }, 0);
     </script>
    </body>
    </html>
  • 相关阅读:
    Batch Normalization
    常用shell命令
    把chord下dbm_noauth做成静态库,提供接口
    vim中多标签和多窗口的使用
    recv返回值
    在XP下从硬盘安装windows 7的方法
    Linux文件系统中的链接
    统计出现次数排名
    linux编程环境
    windows命令行修改连接的DNS
  • 原文地址:https://www.cnblogs.com/jiajialove/p/12020607.html
Copyright © 2011-2022 走看看