Event Loop

JavaScript 是一门单线程的语言,它的异步和多线程的实现是通过 Event Loop 事件循环机制来实现的。Event Loop 包括三个概念:调用栈(call stack)、消息队列(Message Queue)和微任务队列(Microtask Queue)。

调用栈 (call stack)

Event Loop 开始时,会从全局代码开始,一行一行执行,遇到函数调用时,会把函数压入调用栈中(被压入的函数叫做帧(frame),当函数返回后,会从调用栈中弹出。例如:

// 1, 2, 3
function func1() {
console.log(1);
}
function func2() {
console.log(2);
func1();
console.log(3);
}
func2();

此段代码执行时:

  • 首先把 fun2() 压入调用栈中,然后执行它里边的代码,- 把 console.log(2) 压入栈中并执行,执行完毕打印出2后弹出。
  • 接下来把func1()的调用压入栈中,执行它里边的代码,console.log(1)被压入栈,执行并打印出1,弹出。
  • 然后func1()执行完毕,弹出。
  • 最后console.log(3)压入栈中,执行并打印出3,弹出。

整个调用栈被清空。

消息队列 (Message Queue)

JavaScript 中的异步操作比如(fetch)、事件回调、setTimeout、setInterval 的回调函数会入队到消息队列中,它们叫做消息。例如,在上边的代码中加上 setTimeout 的调用:

// 1, 3, 2
function func1() {
console.log(1);
}
function func2() {
setTimeout(() => {
console.log(2);
}, 0);
func1();
console.log(3);
}
func2();

这里在 setTimeout 被压入栈时,它里边的回调函数(匿名函数)会入队到消息队列中,它里边的消息会在调用栈清空的时候执行(这也是为什么 setTimeout 中的延迟参数只是最小延迟时间)。接下来当console.log(3)执行完毕之后,调用栈为空,消息队列中的消息会压入到调用栈中并执行,最后打印出2

微任务队列 (Microtask Queue)

使用 Promise、Async/Await 创建的异步操作会入队到微任务队列中,它也会在调用栈被清空的时候执行,比消息队列优先级高,例如在上边的代码中加入 promise 的定义:

var p = new Promise((resolve) => {
console.log(4);
resolve(5);
});
function func1() {
console.log(1);
}
function func2() {
setTimeout(() => {
console.log(2);
});
func1();
console.log(3);
p.then((resolved) => console.log(resolved));
}
func2();
  1. Promise 构造函数被压入调用栈,之后 console.log(4)resolve(5) 分别压入栈中并执行。最后promie构造函数会弹出。
  2. 下边的执行过程和上边的例子一样,调用 func2(),setTimeout 中的匿名回调入队到消息队列中,调用func1() 打印出1,然后打印3,在遇到 then 的时候,传给then的回调函数会入队到微任务队列中,此时调用栈为空,所以执行微任务队列中的任务,把回调压入调用栈并执行,打印出 5,最后压入并执行消息队列中的消息,打印出5