[JavaScript]之 Event Loop

在讲 Event Loop 前先看一段代码，思考他的输出内容是什么

console.log(1);

setTimeout(function() {
  console.log(2);
}, 0);

let promise = new Promise((resolve,reject)=>{
  console.log(3);
  resolve();
  console.log(4);
})

promise.then(()=>{
  console.log(5);
})

console.log(6);

答案是：

不要提前偷看呀！

1,3,4,6,5,2

如果你答错了，就继续往下看叭~，答对了也看看(万一是碰巧呢，哈哈)

接下来先了解一下一些基础知识

一、任务队列

JavaScript 单线程任务被分为同步任务和异步任务，同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。异步任务指的是，不进入主线程，他会在异步任务有了结果后，将注册的回调函数放入任务队列中等待主线程空闲的时候（调用栈被清空），被读取到栈内等待主线程的执行。

任务队列即队列，是一种先进先出的数据结构。

二、JS 执行栈(调用栈 call-stack)

所有同步任务都在主线程上执行，形成一个执行栈
JS 执行栈采用的是后进先出的规则，当函数执行的时候，会被添加到栈的顶部，当执行栈执行完成后，就会从栈顶移出，直到栈内被清空。

三、宏任务和微任务

在 JavaScript 中，任务被分成两种，一种叫宏任务(MacroTask)，也叫 Task，一种叫微任务(MicroTask)

1. 宏任务(MacroTask)

• script 全部代码
• setTimeout
• setInterval
• I/O

2. 微任务(MicroTask)

• Promise.then catch finally
• MutationObserver

四、Event Loop(事件循环)

主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop(事件循环)，为了更好的理解 Event Loop，看下图

Event Loop.png

主线程运行的时候，产生堆(heap)和栈(stack)，栈中的代码调用各种外部API，它们在任务队列中加入各种事件（click，load，done）
执行栈在执行完同步任务后，查看执行栈是否为空，如果执行栈为空，就会去检查微任务(microTask)队列是否为空，如果为空的话，就执行宏任务(MacroTask)，否则就一次性执行完所有微任务(microTask)。
每次单个宏任务(MacroTask)执行完毕后，检查微任务(microTask)队列是否为空，如果不为空的话，会按照先入先出的规则全部执行完微任务(microTask)后，设置微任务(microTask)队列为null，然后再执行宏任务(MacroTask) ，如此循环。

五、结合代码更好的理解 Event Loop

让我们回答最初的那段代码

console.log(1);

setTimeout(function() {
  console.log(2);
}, 0);

let promise = new Promise((resolve,reject)=>{
  console.log(3);
  resolve();
  console.log(4);
})

promise.then(()=>{
  console.log(5);
})

console.log(6);

这段代码整体可以看成是一个宏任务，主线程运行到第一行代码时，先打印出1，然后运行到 setTimeout，他是一个异步的宏任务，所以会将他放到任务队列中的宏任务队列中，接着打印3(因为 Promise 被创建后就会立即执行)，resolve()会将 Promise 的状态从 pending 变为 resolved，由于 Promise 是异步的，并且是微任务，所以会将 promise.then 的回调放到微任务队列，暂不调用，接着打印4，然后打印6，因为他们都是同步的任务会立即执行，这个时候所有的同步任务被执行完了，执行栈为空，那么会去检查微任务队列是否为空，发现不为空，那么就会调用 promise.then 的回调打印5，微任务执行完毕后会去执行宏任务，调用 setTimeout 的回调，打印2。

六、总结

以上呢就是对 Event Loop 的了解，我们只需记住当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件，然后再去宏任务队列中取出一个事件。同一次事件循环中，微任务永远在宏任务之前执行。