分时函数通过将长任务拆分为小段，在浏览器空闲或帧间隔中执行，避免主线程阻塞。需先识别>50ms的长任务，按计算性质选用requestIdleCallback、requestAnimationFrame或setTimeout，并配合时间控量与DOM优化。
长任务用分时函数处理，核心是把一次耗时操作拆成多个小段，在浏览器空闲或帧间隔中穿插执行，避免主线程被独占。它不减少总耗时，但能保证页面可交互、不卡顿。
识别真正需要分时的长任务
不是所有慢代码都要切片，先确认是否构成“长任务”：在 Chrome DevTools Performance 面板中看到持续 >50ms 的红色块；或用 PerformanceObserver 捕获 longtask 事件。典型场景包括：
- 同步遍历并处理数万条数据（如格式化、校验、索引构建）
- 递归解析深层嵌套对象或大型 JSON
- 批量生成 DOM 节点但未做可视区控制
- A* 寻路等算法单次执行超 20ms
注意：DOM 批量插入本身不慢，但如果每步都读 offsetHeight 或 getBoundingClientRect，会触发强制重排——这时该优化操作方式，而非盲目切片。
选对分时调度方式
不同任务性质决定调度策略，不能只靠 setTimeout 一招打天下：
立即学习“Java免费学习笔记（深入）”；
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
-
纯计算、无 DOM 依赖：优先用
requestIdleCallback，配合deadline.timeRemaining() > 1判断剩余空闲时间，并设{ timeout: 2000 }防止挂起 -
与滚动/动画强相关：用
requestAnimationFrame，确保计算节奏贴合屏幕刷新，比如动态计算可视区域数据 -
兼容性要求高或需明确让出主线程：用
setTimeout(..., 0)或queueMicrotask（后者不释放渲染权，适合批内串联） - 计算极其密集（如 CSV 解析、加密）：直接移交 Web Worker，彻底剥离主线程
实现一个可靠的基础分时函数
关键不在固定切多少条，而在按时间控量。以下是一个兼顾精度与兼容性的通用模板：
function scheduleInChunks(data, handler, done, options = {}) {
const {
chunkTime = 16, // 每块目标耗时（ms）
minChunk = 10,
maxChunk = 200
} = options;
<p>let i = 0;
let lastStart = performance.now();</p><p>function runChunk() {
const start = performance.now();
let count = 0;</p><pre class='brush:php;toolbar:false;'>while (i < data.length && count < maxChunk && start + chunkTime > performance.now()) {
handler(data[i]);
i++;
count++;
}
const elapsed = performance.now() - start;
if (i < data.length) {
// 动态调整下一批大小：耗时偏高则减量，偏低可略增
const adjust = elapsed > chunkTime * 1.2 ? 0.7 : elapsed < chunkTime * 0.6 ? 1.3 : 1;
const nextChunk = Math.max(minChunk, Math.min(maxChunk, Math.round(count * adjust)));
// 选择调度方式：有 idle 支持就用它，否则降级为 setTimeout
if ('requestIdleCallback' in window) {
requestIdleCallback(runChunk, { timeout: 2000 });
} else {
setTimeout(runChunk, 0);
}
} else {
done?.();
}}
runChunk(); }
调用示例：scheduleInChunks(largeArray, item => doSomething(item), () => console.log('done'))
配套必须做的轻量优化
只分时不够，还要堵住隐性性能漏洞：
- DOM 批量插入统一用
DocumentFragment，避免反复 layout - 禁用循环中读取
offsetHeight、getBoundingClientRect()等触发重排的属性 - 非首屏逻辑（如埋点初始化、缓存预热）延后到
requestIdleCallback中执行 - 用
IntersectionObserver延迟绑定视口外元素的事件监听器
