前端处理大批量Dom元素-分时函数

前端处理大批量DOM元素的时候页面会出现DOM更新卡顿的问题，这正是因为DOM是一个线程 js是另一个线程，操作dom是两个进程之间的通信，一定会有性能的问题，小程序也是如此，而且dom渲染还会引起重绘和回流 引起性能问题

分时函数

一次性在dom添加多个节点会产生很大的性能问题

<script type="text/javascript">

    function createDom(data) {
      const div = document.createElement('div');
      div.innerHTML = data;
      document.body.appendChild(div);
    }  

    function chunkData (data, num, callback) {
    
    let time; 
    const start = function() { 
      for (let i = 0; i < Math.min(num, data.length); i++) {
        callback(data.shift());
      }
    }
    
    return function () {
      time = setInterval(function () {
        if(data.length === 0) {
          
          return clearInterval(time);
        }
        start();
      } , 300);
    }
    
  }
    window.onload = function () {
      const data = [];//要加载的数据
      for(var i = 0; i <= 10000; i++) {
        data.push(i);
      }
     for(let i = 0; i < data.length; i++) { //1.简单粗暴的方法
        createDom(i);
      }
    // chunkData(data, 20, createDom)();//2.分时加载
    }
  
    </script> 

下图一次性加载多个dom导致页面加载时间变长

采用分时加载后(使用chunkData方法)