浏览器性能长列表的优化

长列表优化

  当我们需要一次性创建一个1万个li的时候，这个时候如果每创建一次就给ul append一次那么浏览器会非常的卡顿 造成打开页面以后很长一段时间处于空白的页面，这对于用户来说是非常不好的体验 ，所以我们引入虚拟dom 按需加在，边加载边渲染

<script>
    // 总数量
    const total = 100000;
    let ul = document.querySelector('ul');
    // 一次性加载20条
    const once = 20;
    // 需要被总加载的次数
    const loopCount = total/once;
    // 已经加载过的次数
    let countHasRender = 0;
    function add() {
      // const fragment = document.createDocumentFragment();
      // 先创建一个虚拟的节点 从而引起没必要的渲染
      // 当所有的 li创捷完成以后 一次性添加到ul
      // 可以采取分段渲染的思路 一次只加载一屏的数据
      //   window.requestAnimationFrame(add); 逐帧渲染 16毫秒调用一次
      const fragment = document.createDocumentFragment(); //创捷一个虚拟dom节点
      for (let i = 0; i < once; i++) {
        const li = document.createElement('li');
        li.innerHTML = Math.floor(Math.random()*total);
        fragment.appendChild(li)
      }
      ul.appendChild(fragment)
      countHasRender += 1;
      loop();
    }
    function loop(){
      if(countHasRender < loopCount){
        window.requestAnimationFrame(add);//类似与setTimeout 逐帧渲染 16毫秒调用一次
      }
    }
    loop();
  </script>