页面处理大量数据

当页面处理巨大数据，一次性输入，会导致大量当重排、重绘工作，页面容易卡顿、卡死等。

可以对数据进行分片处理，多次少量执行操作。

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行；

// data为所有数据的数组 ， callback 拿到当数据要做的操作 ,pageSize 一次取多少条
export function UtilHandleBigData(data, callback, pageSize = 100) {
  let totalCount = data.length; // 共多少条
  let currentPageNumber = 1; // 当前页数
  let totalPageNumer = Math.ceil(totalCount / pageSize); //可分多少页,就是分割为多少个小数组
  
  let handler = () => {
    let start = (currentPageNumber - 1) * pageSize;
    let end = currentPageNumber * pageSize;
    let currentData = data.slice(start, end); // 当前页的数据
    if (typeof callback === "function") {
      callback(currentData, {
        totalCount,
        totalPageNumer,
        currentPageNumber,
        pageSize,
      });
    }
    if (currentPageNumber < totalPageNumer) {
      window.requestAnimationFrame(handler);
    }
    currentPageNumber++;
  };
  handler();
}

使用的时候：

let allData = [0, 1, 2 /**...很多条*/];
let dataView = []; // 要显示在页面的列表
UtilHandleBigData(allData, (data) => {
  dataView.push(...data);
});

重排：计算渲染树上每个节点的尺寸和坐标信息，并将其安置在界面的正确位置。

重绘：在重排好后，绘制节点的颜色，透明度之类，等等跟几何信息无关的属性。