当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 如何渲染几万条数据并不卡住界面？

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

2019年12月11日  | 移动技术网IT编程  | 我要评论

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

如何在不卡住页面的情况下渲染数据，也就是说不能一次性将几万条 都渲染出来，而应该一次渲染部分 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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网