渲染十万条数据 浏览器不卡顿

 //插入十万条数据
 const total = 100000;
 //每一次插入20条数据
 const once= 20;
 //插入的数据需要的次数
 const loopCount= Math.ceil(total/once);
 //渲染的次数
 let countRender= 0;
 const ul = document.querySelector("ul");
 
 
 //添加数据的方法
 function add(){
    //创建虚拟节点
    const fragment = document.createDocumentFragment();
    for(let i= 0; i< once; i++){
        const li = document.createElement("li");
        li.innerHTML = Math.floor(Math.random()*100000)
        fragment.appendChild(li);
    }
    ul.appendChild(fragment);
    countRender++;
    loop();
 }
 
 function loop(){
    if(countRender < loopCount){
        window.requestAnimationFrame(add);  //requestAnimationFrame:请求动画帧
    }
 }
 
 loop()