使用 requestidlecallback 或 settimeout 将长任务拆分为多个小任务，利用浏览器空闲时间执行，避免阻塞主线程。具体做法是将大循环或复杂计算切分成小块，每块执行后让出控制权，确保 ui 渲染和交互不被长时间打断。
requestIdleCallback 如何调度空闲任务
requestIdleCallback 会在浏览器空闲时调用回调函数，通过 deadline.timeRemaining() 判断剩余时间，决定是继续执行当前任务还是挂起等待下一轮。这种方式比 setTimeout 更精准地匹配浏览器调度周期。
function splitLongTask(data) {
let index = 0;
function processChunk() {
const chunkSize = 50;
const end = Math.min(index + chunkSize, data.length);
while (index < end) {
console.log('Processing:', data[index]);
index++;
}
if (index < data.length) {
requestIdleCallback(processChunk);
} else {
console.log('All done');
}
}
requestIdleCallback(processChunk);
}
const largeData = Array.from({ length: 1000 }, (_, i) => i);
splitLongTask(largeData); // 预期输出：分批打印 Processing: 0 到 Processing: 999，最后打印 All done
setTimeout 与 requestIdleCallback 的区别
setTimeout 强制在指定毫秒后插入任务队列，不关心浏览器是否忙碌；而 requestIdleCallback 仅在无高优先级任务时触发。若需兼容旧环境或简单场景，setTimeout(fn, 0) 也能实现类似拆分效果，但精度较低。
立即学习“Java免费学习笔记（深入）”；
function splitWithTimeout(data) {
let index = 0;
function processChunk() {
const chunkSize = 50;
const end = Math.min(index + chunkSize, data.length);
for (let i = index; i < end; i++) {
console.log('Processing:', data[i]);
}
index = end;
if (index < data.length) {
setTimeout(processChunk, 0);
} else {
console.log('All done');
}
}
setTimeout(processChunk, 0);
}
const largeData = Array.from({ length: 1000 }, (_, i) => i);
splitWithTimeout(largeData); // 预期输出：分批打印 Processing: 0 到 Processing: 999，最后打印 All done
当 data.length 为 0 时程序行为是什么
若输入数组为空，splitLongTask 中的 processChunk 首次执行时 index=0，end=0，循环不执行，直接判断 index 为 false，跳过递归调用，最终打印 'All done'。此情况不会触发任何错误，符合预期。
