JavaScript耗时计算需拆分任务以避免阻塞主线程：用setTimeout分批执行大任务，queueMicrotask调度轻量计算，requestIdleCallback利用空闲时间补全，保障60fps渲染与交互响应。
JavaScript 中耗时计算会直接阻塞主线程，导致页面卡顿、交互无响应。利用事件循环机制优化，核心思路是主动让出主线程控制权，把大任务拆解为小块，在宏任务或微任务间隙执行，让浏览器有机会处理渲染、用户输入等高优先级任务。
用 setTimeout 拆分宏任务，保障页面响应
将长循环或大数据处理切分成多个小批次，每批执行后用 setTimeout(fn, 0) 推入下一轮宏任务队列。这样每次执行完一小块，事件循环就能回到渲染阶段或响应点击事件。
- 适合：计算量大但单次耗时可控（如毫秒级）的场景，例如遍历万级数组做数据转换
- 注意：不能用 setInterval 连续触发，容易累积延迟；推荐递归调用 setTimeout 并控制总进度
- 示例：处理 10 万个对象时，每 100 个为一批，处理完立即 setTimeout 启动下一批
用 queueMicrotask 做轻量级连续调度
queueMicrotask 将回调插入当前宏任务结束后的微任务队列，执行时机比 setTimeout 更早、更紧凑。适合需要快速连续推进但又不能阻塞渲染的轻量计算（如状态批量更新、小范围 DOM 预处理）。
- 适合：单次计算极快（
- 注意：不要在微任务中递归调用自身，否则会填满微任务队列，导致事件循环无法进入下一宏任务，页面彻底冻结
- 对比 Promise.then：queueMicrotask 更语义清晰、开销更低，是标准推荐方式
避免同步阻塞，优先移交 Web API 处理
纯 JS 计算无法绕过单线程限制，但部分耗时操作可交给浏览器底层多线程处理：
立即学习“Java免费学习笔记（深入）”；
- 图像处理用 OffscreenCanvas + Web Worker，完全脱离主线程
- 加密/压缩等 CPU 密集型任务使用 Web Crypto API 或 CompressionStream，它们是异步且由系统线程执行
- 大量 JSON 解析可用 structuredClone（支持异步）或分片解析 + setTimeout 调度
监控与验证优化效果
光拆分不够，得确认是否真正释放了主线程：
- 用 Chrome DevTools 的 Performance 面板 录制操作，观察主线程是否仍有长任务（>50ms 的黄色/红色块）
- 检查 Frames 轨迹：优化后应看到更稳定的 60fps 渲染节奏
- 监听 requestIdleCallback，在浏览器空闲时补全剩余计算，进一步提升用户体验
