核心是将长任务拆分为≤50ms的片段以避免阻塞渲染：用setTimeout分片处理循环、queueMicrotask紧凑计算、requestIdleCallback执行空闲任务，CPU密集型操作应移交Web Worker。
核心是不让任何一段同步代码连续执行超过 50ms。JavaScript 单线程模型下，长任务会卡住渲染、响应和所有其他逻辑。异步拆分不是让代码变快，而是让它“喘气”，把控制权还给浏览器。
用 setTimeout 分片执行耗时循环
这是最直接、兼容性最好的方式。每次只处理一小批数据，然后用 setTimeout(fn, 0) 把下一批推入宏任务队列——这会让事件循环有机会完成当前帧的渲染和用户输入响应。
- 适合场景：遍历万级数组、批量校验、日志格式化、DOM 批量插入等
- 推荐 chunkSize：20–200（视单次处理复杂度动态调整，可用 performance.now() 粗略估算）
- 示例：处理 6 万条记录，每 100 条为一组，组间调用 setTimeout(nextChunk, 0)
- 注意：不要用 setInterval 模拟分片，它不感知任务实际耗时，容易堆积或跳帧
用 queueMicrotask 控制更紧凑的计算节奏
当需要连续执行、且不希望中间穿插渲染（比如先算完所有状态再统一更新 DOM），queueMicrotask 比 setTimeout 更合适。它把任务塞进微任务队列，会在本轮宏任务结束后、下次渲染前立即执行。
- 适合场景：状态批量计算 + DocumentFragment 聚合 DOM 更新
- 优势：避免因频繁渲染导致 layout thrashing
- 风险：若微任务链过长，仍可能触发长任务警告，需配合 chunkSize 限制
用 requestIdleCallback 处理后台低优先级任务
它不主动分片，但提供了一个“浏览器空闲时才执行”的钩子。适合不影响交互的收尾工作，比如上报埋点、缓存清理、预加载资源。
立即学习“Java免费学习笔记（深入）”；
- 必须检查 deadline.timeRemaining() > 0 再执行子任务
- 设置 { timeout: 2000 } 防止关键任务被无限搁置
- 若 deadline.didTimeout === true，应尽快完成当前块并退出，避免影响下一帧
该移走的计算，别硬留在主线程
分片只是缓解，不是根治。真正 CPU 密集型操作（如大图滤镜、加密解密、超大 JSON 解析）应该交给 Web Worker。
- Worker 中无法操作 DOM，但可运行任意 JS 计算逻辑
- 主线程通过 postMessage 发送数据，Worker 处理完再发回结果
- 对流式数据（如超长日志），Worker 可边解析边分段 postMessage，主线程实时消费
