1. 事件循环的基础原理与目标
事件循环是现代浏览器和运行时环境用来调度同步与异步任务的核心机制，其目标是让单线程模型下的代码执行既高效又可预测。
任务队列与执行顺序共同决定了何时执行回调、何时进入渲染阶段，以及如何处理微任务和宏任务的优先级关系。
在理解事件循环时，需要明确主线程执行、阻塞检测、队列调度这三大要素之间的关系，只有掌握它们，才能对性能瓶颈进行定位和优化。
下面通过一个简单的示例来直观感受事件循环的工作方式，帮助落地理解同步与异步的执行时序：
console.log('script start');
setTimeout(() => console.log('timeout'), 0);
Promise.resolve().then(() => console.log('promise'));
console.log('script end');
2. 同步与异步的核心区别及执行顺序
2.1 同步执行的特征
同步代码按顺序逐行执行，不会被事件循环中的回调队列打断，因此它的执行时间与代码块的长度直接相关。
在一个事件循环周期内，同步部分是主线任务，它决定了随后异步操作的起始点。只有当前同步任务完成，事件循环才会去检查微任务队列与宏任务队列。
2.2 异步执行的特征与回调队列
异步操作通过回调队列分发，通常分为宏任务队列与微任务队列两类，微任务队列的任务在当前宏任务结束后、下一轮事件循环开始前执行。
微任务优先级高于宏任务，这意味着在一个宏任务完成后，事件循环会清空所有微任务队列，再去执行下一个宏任务，这样就能确保关键回调尽快完成。
3. 宏任务与微任务的划分及调度机制
3.1 宏任务队列的入口
宏任务包括诸如 setTimeout、setInterval、IO 回调等回调，通常由浏览器的事件触发或定时器触发进入宏任务队列。
每一个宏任务执行完毕后，事件循环会去检查微任务队列，若存在微任务则先执行它们，然后再进入下一轮渲染与宏任务的切换。
3.2 微任务队列的执行顺序
微任务通常由 Promise.then/catch/finally、async/await 的底层微任务构成，在当前宏任务结束后立即执行，确保及时完成的逻辑不会被下一轮宏任务延迟。
典型的执行顺序是：当前宏任务结束、执行所有微任务、若有需要则渲染、再进入下一个宏任务。
4. 浏览器与 Node.js 的事件循环差异
4.1 浏览器中的任务队列
浏览器的事件循环分为若干阶段，如 任务阶段、渲染阶段、刷新阶段，核心思想是通过多阶段循环来实现回调的有序执行与屏幕渲染。
在浏览器中，渲染可能会在某些宏任务结束后插入，但微任务仍会在每个宏任务完成后第一时间执行，确保 UI 更新和状态变更的及时性。
4.2 Node.js 的事件循环分层
Node.js 基于 libuv 实现事件循环，常见的分层包括 timers、pending、poll、 другим、idle、audit 等阶段，每个阶段有自己的一组回调队列。
与浏览器不同，Node.js 的事件循环会在某些阶段对 I/O 事件进行批量处理，适用于高并发网络应用的场景。
5. 实战要点：常见坑与优化技巧
5.1 避免阻塞主线程
在高交互的应用中，阻塞主线程会导致 UI 卡顿，因此应将复杂计算放到 Web Worker 或离屏处理、使用异步算法分阶段执行。
合理地将长时间运行的任务切成多次短任务，可以通过 requestIdleCallback、setTimeout 等组合来实现节流与时间切片，提升流畅度。
5.2 微任务的使用边界
虽然微任务可以让逻辑更快完成，但过多的微任务会导致每轮事件循环的耗时增加，进而影响渲染帧率，因此需要在设计时对微任务数量进行控制。
适度使用 Promise，避免在微任务中执行大量耗时的计算，必要时将计算放在独立的工作单元中完成，再通过微任务完成状态更新。
6. 实战案例与代码示例
6.1 简单的同步与异步混合示例
下面的示例展示了同步代码与异步回调之间的交错执行顺序，以及微任务与宏任务的执行时机。
console.log('A');
setTimeout(function(){ console.log('B'); }, 0);
Promise.resolve().then(function(){ console.log('C'); });
console.log('D');
输出顺序的关键点在于：同步代码先执行，随后微任务队列（C）进入执行，最后才是宏任务（B）。
6.2 使用 Promise 与微任务的调度
通过结合 Promise 的微任务和 setTimeout 的宏任务，可以实现对异步流程的细粒度控制。
async function main(){
console.log('start');
await new Promise(resolve => setTimeout(resolve, 0));
console.log('after await');
}
main();
console.log('end');
这段代码中，await 的 Promise 会被处理为微任务，从而在当前事件循环的微任务阶段快速推进，紧接着输出 end，然后进入下一轮事件循环执行 after await。
再看一个更细致的示例，结合微任务与宏任务的执行顺序，用于调试异步流程：
console.log('start');
Promise.resolve().then(() => console.log('promise1'));
setTimeout(() => console.log('timeout1'), 0);
Promise.resolve().then(() => console.log('promise2'));
console.log('end');
输出顺序揭示了微任务先于宏任务执行的规则，以及同步日志对整个执行节奏的影响。
