任务切片通过将耗时计算拆为微/宏任务并主动让出主线程，解决大数据统计导致的页面卡顿；它比Web Worker更适用于依赖DOM、实时输入或响应式状态的中等规模数据场景。
大数据统计计算卡住页面，本质是主线程被长时间占用，导致 UI 渲染和用户操作无法及时响应。任务切片（Task Slicing）不是简单“分几段”，而是把耗时计算拆成多个微任务或宏任务，主动让出主线程控制权，保证浏览器能穿插执行渲染、事件处理等关键任务。
为什么切片比直接用 Web Worker 更实用
Web Worker 确实能彻底剥离计算，但并非所有场景都适用：比如计算逻辑强依赖 DOM 节点尺寸、需实时读取 input 值、或涉及 Vue/React 响应式状态联动时，跨线程通信反而增加复杂度和延迟。任务切片在主线程内即可落地，适合中等规模数据（几万条以内）的实时统计，例如：
- 表格列值频次统计（如“部门分布柱状图”）
- 时间序列聚合（按小时/天求均值、最大值）
- 条件筛选+计数（如“近7天未登录用户数”）
核心实现：requestIdleCallback + 循环中断
优先使用 requestIdleCallback，它会在浏览器空闲时段自动调度任务，且自带超时保护（maxDuration），避免阻塞下一帧。若需兼容旧浏览器，可用 setTimeout(fn, 0) 或 Promise.resolve().then() 降级。
关键不在“怎么分”，而在“怎么停”——每次执行前检查是否还有空闲时间，有则继续，否则交还控制权：
function sliceCalculate(data, processor, chunkSize = 1000) {
let index = 0;
const result = {};
<p>function work() {
const start = performance.now();
const end = start + 2; // 每次最多执行2ms</p><pre class="brush:php;toolbar:false;">while (index < data.length && performance.now() - start < end) {
const item = data[index];
processor(item, result);
index++;
}
if (index < data.length) {
requestIdleCallback(work, { timeout: 1000 });
}}
requestIdleCallback(work, { timeout: 1000 }); return result; }
// 使用示例：统计各状态出现次数 const counts = sliceCalculate( largeDataset, (item, acc) => { acc[item.status] = (acc[item.status] || 0) + 1; } );
配合防抖与状态同步，避免中间态干扰
切片过程中用户可能修改筛选条件或切换 Tab，若不处理会导致结果错乱或内存泄漏：
- 为每次切片任务绑定唯一 abortId，新任务启动时取消旧任务
- 统计结果只在全部完成后再触发视图更新（避免频繁触发 Vue 的响应式更新）
- 显示轻量加载态（如“统计中… 65%”），但用 CSS 动画而非 JS 定时器，不抢占主线程
进阶：结合增量更新做“边算边显”
对需要实时反馈的场景（如搜索联想词频），可将切片结果暂存为增量快照，每完成一块就合并并触发一次轻量更新：
- 用 Map 或 WeakMap 缓存中间聚合值，避免重复计算
- 首次展示取前1000条的统计结果，后续逐步补全，视觉上更平滑
- 若用户中途取消，保留已算部分，下次复用
