某电商大促页面突然卡死，用户疯狂点击却毫无反应。监控系统显示CPU占用100%，但代码逻辑看似完美。当所有人对着屏幕抓狂时，资深工程师突然说："把那个微任务里的计算拆成宏任务！" 三分钟后，页面丝滑如初。这背后隐藏的，正是事件循环机制的实战应用密码。

事件循环基础概念：

• 宏任务：setTimeout、setInterval、I/O、UI渲染、网络请求
• 微任务：Promise.then、MutationObserver、queueMicrotask
• 执行顺序：同步代码 → 微任务 → 渲染 → 宏任务

真实开发场景应用指南

场景1：海量数据渲染导致卡死

场景2：用户交互优先响应

需求：搜索框输入时既要实时请求，又要保证最新请求优先

场景3：利用requestAnimationFrame

场景4：利用Web Worker
上面两个API 需要有奇淫技巧，本篇文章不赘述，后续我们继续分析。

高频面试题破解

Q1：setTimeout(fn, 0) 和 Promise.resolve().then(fn) 哪个先执行？

A：微任务（Promise）先执行，因为事件循环优先清空微任务队列

Q2：如何避免长任务阻塞渲染？

A：1）拆分任务到多个事件循环 2）使用Web Worker 3）requestIdleCallback调度

Q3：React的setState是同步还是异步？

A：React 的 setState 在合成事件和生命周期函数中通常是异步的，这有助于提高性能和批量更新状态；而在原生事件处理函数、setTimeout 和 setInterval 中是同步的。无论 setState 是同步还是异步，都可以使用其第二个参数（回调函数）来确保在状态更新完成后执行某些操作。

Q5：如何实现优先渲染再执行任务？

A：在requestAnimationFrame回调中安排任务，确保在渲染后执行

掌握事件循环机制，理解浏览器如何调度任务时，那些性能优化难题、卡顿问题都会迎刃而解。今天就到这里啦。