事件循环通过调用栈、宏任务队列和微任务队列协调异步操作。同步代码执行后,引擎先清空微任务队列,再执行一个宏任务,如此循环。例如,console.log('start')和'end'先输出;Promise.then进入微任务队列,随后执行;setTimeout回调在宏任务队列中,最后执行,因此输出顺序为:start → end → promise → timeout。微任务优先级高于宏任务,且在每次宏任务结束后立即执行。该机制由宿主环境实现,JS引擎如V8负责配合完成任务调度,确保主线程不被阻塞,保持页面响应性。

JavaScript 引擎通过事件循环(Event Loop)机制实现异步非阻塞操作,让代码能够在处理耗时任务时不阻塞主线程。虽然 JavaScript 是单线程语言,但事件循环结合调用栈、任务队列和微任务队列,使得异步逻辑得以有序执行。
调用栈与执行上下文
JavaScript 代码的执行依赖于调用栈,它记录当前正在运行的函数调用。每当一个函数被调用,其执行上下文就会被压入栈中;函数执行完毕后,上下文从栈中弹出。
由于 JS 是单线程,同一时间只能处理一个任务。如果某个操作(如网络请求)直接阻塞主线程,页面就会卡住。为解决这个问题,事件循环引入了任务队列机制。
宏任务与微任务队列
异步操作的结果不会立即执行,而是被推入不同的任务队列:
立即学习“Java免费学习笔记(深入)”;
- 宏任务队列(Macro Task Queue):包含 setTimeout、setInterval、I/O、UI 渲染、script 标签中的整体代码等。
- 微任务队列(Micro Task Queue):包含 Promise.then、MutationObserver、queueMicrotask 等。
事件循环的基本流程是:
- 执行调用栈中的同步代码。
- 当同步代码执行完毕,检查微任务队列。
- 执行所有当前存在的微任务(按入队顺序)。
- 取出一个宏任务执行。
- 重复上述过程。
浏览器环境中的实际运作
以以下代码为例:
console.log('start');setTimeout(() => console.log('timeout'), 0);
Promise.resolve().then(() => console.log('promise'));
console.log('end');
输出顺序是:start → end → promise → timeout
原因如下:
- 'start' 和 'end' 是同步代码,直接输出。
- setTimeout 回调进入宏任务队列。
- Promise.then 回调进入微任务队列。
- 同步代码执行完后,事件循环优先清空微任务队列,输出 'promise'。
- 然后从宏任务队列取一个任务执行,输出 'timeout'。
引擎层面的实现要点
不同 JavaScript 引擎(如 V8、SpiderMonkey)在底层实现上略有差异,但核心逻辑一致:
- 引擎在每次宏任务结束后主动检查微任务队列,并持续执行直到队列为空。
- 微任务在本轮事件循环结束前必须全部执行,保证高优先级回调及时响应。
- UI 渲染通常作为一个宏任务,在每轮事件循环之间进行,确保界面更新不会过于频繁。
这种设计使开发者可以写出看似“并发”的代码,而引擎则通过事件循环协调任务执行顺序,保持主线程响应性。
基本上就这些。事件循环不是由 JavaScript 语言本身定义的,而是由宿主环境(如浏览器或 Node.js)实现的机制,JS 引擎与其协同工作,共同支撑起整个异步体系。不复杂但容易忽略细节。










