使用 requestidlecallback 将长文本的 textcontent 赋值操作拆分为多个时间片执行，以避免阻塞主线程。具体做法是将目标字符串按字符或块切分，在空闲回调中逐批处理并更新 dom，直到所有数据写入完毕。
requestIdleCallback 如何控制单次处理量
通过检查 deadline.timeRemaining() 返回的毫秒数来决定每批处理的字符数量。如果剩余时间充足则继续处理，否则暂停并在下一轮空闲时恢复，确保不超出浏览器分配的时间预算。
const text = 'A'.repeat(100000); // 模拟长文本
const targetEl = document.getElementById('output');
let index = 0;
const chunkSize = 5000; // 每批处理字符数
function processChunk(deadline) {
let batchEnd = Math.min(index + chunkSize, text.length);
while (index < batchEnd && deadline.timeRemaining() > 1) {
// 实际应用中可能需要构建新字符串或使用 DocumentFragment
// 这里简化为直接赋值演示逻辑，真实场景建议累积后一次性赋值
index += chunkSize;
}
if (index < text.length) {
requestIdleCallback(processChunk);
} else {
targetEl.textContent = text;
console.log('Done');
}
}
requestIdleCallback(processChunk);分批累积与一次性赋值的性能权衡
虽然逐字符更新 DOM 能保持响应，但频繁的重排（Reflow）开销巨大。更优的策略是在每个时间片内累积已处理的子串，待该批次结束后一次性更新 textContent，从而减少 DOM 操作次数。
javascript-typescript-typescript-scaffold
下载
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
立即学习“Java免费学习笔记（深入）”；
const text = 'B'.repeat(100000);
const targetEl = document.getElementById('output');
let currentIndex = 0;
let accumulatedText = '';
const batchSize = 10000;
function splitTask(deadline) {
const endTime = deadline.timeRemaining();
let processedInThisBatch = 0;
while (currentIndex < text.length && processedInThisBatch < batchSize && endTime - processedInThisBatch * 0.1 > 0) {
accumulatedText += text[currentIndex];
currentIndex++;
processedInThisBatch++;
}
// 每处理完一批就更新一次 DOM，平衡响应速度与重排开销
if (accumulatedText.length > 0) {
targetEl.textContent = accumulatedText;
}
if (currentIndex < text.length) {
requestIdleCallback(splitTask);
} else {
console.log('Final update complete');
}
}
requestIdleCallback(splitTask);当 timeRemaining 不足时的回退策略
在某些低性能设备或高负载页面中，requestIdleCallback 可能长时间不被调用或剩余时间极少。此时应设置一个最大超时时间，若超过该时间仍未完成，则强制中断拆分逻辑并完成剩余内容的渲染，防止任务无限期挂起。
