js实现一次渲染上万条数据，页面加载性能优化

 <button class="button">
        开始
    </button>
    <div class="box">

    </div>

let num = 10000; // 总条数
let batchSize = 100; // 每批次添加的数量
let arr = Array.from({ length: num }, (_, i) => i); // 创建一个包含 num 个元素的数组
/**方案一**/
function timeChunk(arr, fn, count) {
    var len = arr.length;
    var start = function () {
        for (var i = 0; i < Math.min(count || 1, arr.length); i++) {
            var obj = arr.shift();
            fn(obj);
        }
    };
    return function () {
        var t = setInterval(function () {
            if (arr.length === 0) {
                clearInterval(t);
            } else {
                start();
            }
        }, 200);
    }
}

$('.button').click(function () {
    let addBatch = timeChunk(arr, function (index) {
        let p = document.createElement('p');
        p.textContent = `第${index}条数据`;
        $('.box').append(p);
    }, batchSize);
    addBatch();
});
/**方案二**/
// 定义一个函数 timeChunk，用于分批次执行添加操作
function timeChunk(arr, fn, count) {
    var len = arr.length;
    // 定义一个内部函数 start，用于开始执行分批次添加操作
    var start = function () {
        // 创建一个文档片段，用于存储要添加的 <p> 元素
        var fragment = document.createDocumentFragment();
        // 循环执行添加操作，每次最多添加 count 个元素
        for (var i = 0; i < Math.min(count || 1, arr.length); i++) {
            // 从数组中取出一个元素
            var obj = arr.shift();
            // 调用回调函数 fn，将当前元素和文档片段作为参数传入
            fn(obj, fragment);
        }
        // 将文档片段添加到 DOM 中
        $('.box').append(fragment);
        // 如果数组中还有剩余元素，则继续执行下一批次的添加操作
        if (arr.length > 0) {
            // 使用 requestAnimationFrame 在下一次页面渲染前执行 start 函数
            requestAnimationFrame(start);
        }
    };
    // 返回内部函数 start
    return start;
}

// 绑定按钮的点击事件
$('.button').click(function () {
    // 调用 timeChunk 函数，传入数组、回调函数和每批次添加的数量
    let addBatch = timeChunk(arr, function (index, fragment) {
        // 创建一个 <p> 元素
        let p = document.createElement('p');
        // 设置 <p> 元素的文本内容
        p.textContent = `第${index}条数据`;
        // 将 <p> 元素添加到文档片段中
        fragment.appendChild(p);
    }, batchSize);
    // 使用 requestAnimationFrame 在下一次页面渲染前执行 addBatch 函数
    requestAnimationFrame(addBatch);
});