假如有一个需求，我们要在一个页面中 ul 标签里渲染 **十万** 个 li 标签

假如有一个需求，我们要在一个页面中 ul 标签里渲染十万个 li 标签

 1 // 插入十万条数据
 2 const total = 100000;
 3 let ul = document.querySelector('ul'); // 拿到 ul
 4 
 5 // 懒加载的思路 -- 分段渲染
 6 // 1. 一次渲染一屏的量
 7 const once = 20;
 8 // 2. 全部渲染完需要多少次，循环的时候要用
 9 const loopCount = total / once;
10 // 3. 已经渲染了多少次
11 let countHasRender = 0;
12 
13 function add() {
14   // 创建虚拟节点，（使用 createDocumentFragment 不会触发渲染）
15   const fragment = document.createDocumentFragment();
16   // 循环 20 次
17   for (let i = 0; i < once; i++) {
18     const li = document.createElement('li');
19     li.innerText = Math.floor(Math.random() * total);
20     fragment.appendChild(li);
21   }
22   // 最后把虚拟节点 append 到 ul 上
23   ul.appendChild(fragment);
24   // 4. 已渲染的次数 + 1
25   countHasRender += 1;
26   loop();
27 }
28 
29 // 最重要的部分来了
30 function loop() {
31   // 5. 如果还没渲染完，那么就使用 requestAnimationFrame 来继续渲染
32   if (countHasRender < loopCount) {
33     // requestAnimationFrame 叫做逐帧渲染
34     // 类似于 setTimeout(add, 16);
35     // 帧：一秒钟播放多少张图片，一秒钟播放的图片越多，动画就约流畅
36     // 1000/60 = 16
37     window.requestAnimationFrame(add);
38   }
39 }
40 loop();

结论：

可以使用 document.createDocumentFragment 创建虚拟节点，从而避免引起没有必要的渲染
当所有的 li 都创建完毕后，一次性把虚拟节点里的 li 标签全部渲染出来
可以采取分段渲染的方式，比如一次只渲染一屏的数据
最后使用 window.requestAnimationFrame 来逐帧渲染

思路：

导致浏览器卡顿的原因一般都是操作 DOM 的次数太频繁。
如果想要渲染很多条数据不造成卡顿，那么就一定要尽可能的减少操作 DOM 的次数。
比方说 React 的虚拟 DOM，本质上就是用 JS 数据来模拟真实 DOM树，从而大大减少了操作真是 DOM 的次数。
还有在渲染的时候，可以使用 document.createDocumentFragment 创建虚拟节点，从而避免引起没有必要的渲染
也可以采取分段渲染的方式，最后使用 window.requestAnimationFrame 来逐帧渲染