关键在于将耗时逻辑拆分为小块并主动让出主线程。可用Promise微任务分片处理密集计算，requestAnimationFrame对齐渲染帧做动画，setTimeout实现可控后台任务，需严格区分宏/微任务时机避免调度失控。
关键在于把耗时逻辑拆成小块，主动让出主线程，让事件循环有机会穿插处理用户交互、渲染等高优先级任务。
用微任务切分同步密集型计算
当有大量数据需要逐项处理（如遍历万级数组做复杂运算），不要用 for 或 while 一口气跑完。改用 Promise.resolve().then() 把每次迭代包装成微任务，利用“清空整个微任务队列”的特性实现平滑调度。
- 每次只处理几十或上百项，然后 return Promise.resolve().then(() => nextChunk())
- 这样既避免调用栈过深，又比 setTimeout 更快响应（微任务在当前宏任务结束后立即执行）
- 适合对实时性要求稍高的场景，比如实时校验、轻量级数据转换
用 requestAnimationFrame 控制动画类循环
如果逻辑和视觉更新强相关（如 Canvas 动画、滚动监听、拖拽反馈），优先使用 requestAnimationFrame 而不是 setTimeout 或 setInterval。
- 它会自动对齐浏览器刷新节奏（通常 60fps），不会在帧中间强行插入任务
- 浏览器在页面不可见时会自动暂停，节省资源
- 写法类似递归：function animate() { /* 逻辑 */ requestAnimationFrame(animate); }
用 setTimeout 实现可控的后台任务
对纯计算、无 UI 依赖的长时间任务（如本地文件解析、加密解密、批量 API 模拟），用 setTimeout(fn, 0) 是最稳妥的非阻塞方案。
立即学习“Java免费学习笔记（深入）”；
- 即使延迟设为 0，它也属于宏任务，一定会等到当前调用栈和所有微任务清空后才执行
- 可配合计数器或状态标记实现暂停、终止、进度反馈
- 示例中常见的 loopId = setTimeout(() => { doSomeStuff(); }, 1000) 就是典型应用
避免常见陷阱：别混淆宏任务与微任务时机
设计时必须清楚哪些操作触发宏任务、哪些触发微任务，否则调度会失控。
- 宏任务：setTimeout、setInterval、I/O 回调、UI 渲染、new Promise(...).then() 外层代码
- 微任务：Promise.then/catch/finally 回调、queueMicrotask、MutationObserver
- 错误示例：在 Promise.then 里连续触发 100 次 setTimeout —— 这会让事件循环被大量宏任务拖慢，不如统一用微任务分片
