首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ JavaScript / 文章详情

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

Sonder
2022-06-13
1487字
4分钟
浏览 (2.8k)

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

复制代码
<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-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>
下一篇 / 国内用户访问GitHub慢怎么办?Fetch Github Hosts帮助你

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)