长列表优化

导致浏览器卡顿的原因是因为操作dom次数太多了，

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

正常的操作 ：

 let ul = document.getElementById('ul');
  let frag = document.createDocumentFragment()//创建一个虚拟的节点,不会触发渲染
  for (let i = 0; i < 100000; i++) {
    let li = document.createElement('li')
    li.innerText = i+'1';
    frag.appendChild(li)
  }
  ul.appendChild(frag)

使用这种方式，会发现，渲染的时候会有一小段时间的白屏

长列表优化:

  let ul = document.getElementById('ul');
  let total = 100000;//总的条数
  let once = 20 //一屏的数量
  let needCreate = total/once; //需要递归渲染的次数
  let createdNum = 0 //记录当前已经递归的次数
  function add() {
    let frag = document.createDocumentFragment()//创建一个虚拟的节点,不会触发渲染
    for(let i = 0;i < once;i++){
        let li = document.createElement('li')
        li.innerText = createdNum*once +i + '';
        frag.appendChild(li)
    }
    ul.appendChild(frag)
    createdNum+= 1;  //递归次数加一

    if(createdNum < needCreate){  //如果递归次数小于需要递归的次数，则继续调用
      requestAnimationFrame(add); //
    }
  }
    add()