事件循环机制解释了JavaScript异步行为的执行顺序。JavaScript采用单线程模型，通过事件循环实现非阻性I/O：当遇到异步操作如setTimeout或Promise时，JS引擎将其交给浏览器模块处理，完成后将回调加入任务队列。事件循环不断从队列中取出任务执行，分为宏任务和微任务两类。宏任务包括整体代码、setTimeout、setInterval、I/O等；微任务包括Promise.then、MutationObserver等。每次执行完一个宏任务后，会立即清空所有当前微任务，再进行下一个宏任务。例如，在console.log('start'); setTimeout(() => console.log('timeout'), 0); Promise.resolve().then(() => console.log('promise')); console.log('end');中，输出为start、end、promise、timeout，因为同步代码先执行，接着微任务（Promise.then）在宏任务结束后优先执行，最后才执行新的宏任务（setTimeout）。async/await基于Promise，await后的代码被视为微任务，因此也会延迟到本轮宏任务结束后的微任务阶段执行。掌握宏任务与微任务的区别及执行顺序是理解JavaScript异步编程的关键。
JavaScript的事件循环机制是理解其异步编程模型的核心。很多人在使用setTimeout、Promise或async/await时，只知道它们能实现“延迟”或“等待”，却不清楚背后的执行顺序为何有时出人意料。这背后的关键，正是事件循环（Event Loop）。
JavaScript单线程与非阻塞设计
JavaScript最初被设计为浏览器中的脚本语言，用于处理用户交互、DOM操作等任务。为了简化编程模型并避免复杂的状态竞争问题，它采用了单线程执行模型——同一时间只能执行一个任务。
但单线程并不意味着所有操作都必须同步完成。如果每个网络请求或定时器都阻塞主线程，页面将频繁卡顿。为此，JavaScript通过事件循环 + 任务队列实现了非阻塞I/O。
当遇到异步操作（如setTimeout、fetch、addEventListener），JS引擎会将其交给浏览器的其他模块（如定时器模块、网络模块）处理，自身继续执行后续同步代码。当异步任务完成，对应的回调函数会被推入任务队列，等待事件循环调度执行。
立即学习“Java免费学习笔记（深入）”；
宏任务与微任务：两种任务队列
事件循环并非只有一个队列，而是区分了宏任务（Macrotask）和微任务（Microtask）。这种区分直接影响回调的执行顺序。
- 宏任务包括：整体代码块、setTimeout、setInterval、I/O、UI渲染、postMessage等。
- 微任务包括：Promise.then/catch/finally、MutationObserver、queueMicrotask等。
事件循环的基本流程如下：
- 执行一个宏任务（初始为全局脚本）。
- 执行过程中遇到异步操作，将其回调注册到对应的任务队列。
- 当前宏任务执行完毕后，立即清空所有可用的微任务队列。
- 从宏任务队列中取下一个宏任务执行，重复上述过程。
关键点在于：每完成一个宏任务，就会优先执行完所有当前待处理的微任务，然后再进行下一次宏任务。
实际执行顺序示例解析
看一段经典代码：
console.log('start');setTimeout(() => console.log('timeout'), 0);
Promise.resolve().then(() => console.log('promise'));
console.log('end');
输出顺序是：
startend
promise
timeout
原因分析：
- “start”是同步代码，最先打印。
- setTimeout加入宏任务队列。
- Promise.then加入微任务队列。
- “end”是同步代码，紧接着打印。
- 当前宏任务（全局脚本）执行结束，检查微任务队列，发现Promise.then，执行并打印“promise”。
- 微任务清空后，进入下一个宏任务，执行setTimeout回调，打印“timeout”。
async/await与事件循环的关系
async函数本质上是Promise的语法糖，其内部的await会暂停函数执行，等待Promise resolve后再将后续代码作为微任务加入队列。
async function async1() {console.log('async1 start');
await async2();
console.log('async1 end');
}
async function async2() {
console.log('async2');
}
console.log('script start');
async1();
console.log('script end');
输出为：
script startasync1 start
async2
script end
async1 end
注意：“async1 end”在“script end”之后打印，是因为await后的代码相当于被包装成了Promise.then，属于微任务，在本轮宏任务结束后才执行。
基本上就这些。掌握事件循环的关键，是清楚地区分宏任务和微任务，并记住：每轮宏任务结束后，必须清空微任务队列。这个机制虽简单，却是理解JS异步行为的基础。不复杂但容易忽略。
