当页面处理巨大数据，一次性输入，会导致大量当重排、重绘工作，页面容易卡顿、卡死等。
    可以对数据进行分片处理，多次少量执行操作。
    window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行；

    1. // data为所有数据的数组 ， callback 拿到当数据要做的操作 ,pageSize 一次取多少条
    2. export function UtilHandleBigData(data, callback, pageSize = 100) {
    3.   let totalCount = data.length; // 共多少条
    4.   let currentPageNumber = 1; // 当前页数
    5.   let totalPageNumer = Math.ceil(totalCount / pageSize); //可分多少页,就是分割为多少个小数组
    7.   let handler = () => {
    8.     let start = (currentPageNumber - 1) * pageSize;
    9.     let end = currentPageNumber * pageSize;
    10.     let currentData = data.slice(start, end); // 当前页的数据
    11.     if (typeof callback === "function") {
    12.       callback(currentData, {
    13.         totalCount,
    14.         totalPageNumer,
    15.         currentPageNumber,
    16.         pageSize,
    17.       });
    18.     }
    19.     if (currentPageNumber < totalPageNumer) {
    20.       window.requestAnimationFrame(handler);
    21.     }
    22.     currentPageNumber++;
    23.   };
    24.   handler();
    25. }

    使用时候：

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

    重排：计算渲染树上每个节点的尺寸和坐标信息，并将其安置在界面的正确位置。
    重绘：在重排好后，绘制节点的颜色，透明度之类，等等跟几何信息无关的属性。