Skip to content

1.createDocumentFragment 大量数据创建虚拟节点添加页面,避免卡顿

js
 function create(lar=100000,num=20){
      // 插入次数
      let times =Math.ceil(lar / num)
    // 当前渲染次数
    let current = 0
    // 获取ul元素
    let ul = document.querySelector('ul');
    // 添加数据方法
    function addData(){
        // 创建虚拟节点
        let fragment = document.createDocumentFragment();
        for(let i=0;i<num;i++){
            let li = document.createElement('li');
            li.innerText= '第'+(i+1)+'条数据';
            fragment.appendChild(li);
        }
        ul.appendChild(fragment);
        current++;
        loop()
    }
    // 循环插入数据
    function loop(){
        if(current < times){
            window.requestAnimationFrame(addData)
        }
    }
    // 执行循环
    loop()
    }