JS事件循环机制初探

做者：葉@毛豆前端

事件循环机制

js的事件循环机制，在我理解起来就是执行上下文，对函数的出栈和入栈的一个过程。都知道js的一大特色是单线程，这也是这个语言的核心特征。试想一下，若是js是个多线程的语言，同时存在两个线程，一个线程是在某个Dom上添加节点，而另外一个线程倒是删除节点，这个时候浏览器就会产生错乱，而咱们关心的js事件循环机制，正是由js的单线程特质决定的。

先上图，看下大体流程

在上图的过程当中:

1. js引擎逐句的执行script总体代码，造成执行栈
2. 当执行遇到异步代码时，会指给对应的异步进程进行处理（WEB API）
3. 等待异步任务有了运行结果，js的运行环境就在相应的"任务队列"之中push事件任务，等待着被js引擎执行，而当异步没有产生回调（callback）或者说是事件任务，那他就不会push到任务队列里面去。
4. 执行栈任务执行完毕，便会查询任务队列，若是不为空，则读取一个任务推入主线程处理
5. 重复第4个步骤，直到任务队列为空，这样过程即为事件循环，在这执行过程当中若是有产生新的异步任务也会按照上述（3）的方式进行处理。在这个过程当中step(1)同步环境执行，step(4)这样的循环过程即为事件循环

涉及的到异步进程：

• DOM事件，是由浏览器的DOM模块处理，达到触发条件时，在任务队列中添加相应的回调函数
• 定时器setTimeout等，是由浏览器的Timer模块处理，达到设置的时间点时，在任务队列中添加回调
• ajax请求，是由浏览器的Network模块处理，等待请求返回，在任务队列中添加回调

知道了js的大体执行的过程了，咱们看下其中涉及到的一些概念

栈

栈（stack）又名堆栈，它是一种运算受限的线性表。其限制是仅容许在表的一端进行插入和删除运算

知道了栈是一种后进先出的数据结构后，咱们运行一下代码，并模拟它的入栈和出栈过程

function fun2() {
    console.log('fun2')
}
function fun1() {
    fun2();
}
setTimeout(() => {
	console.log('setTimeout')
})
fun1();
复制代码

以上的出入栈如图所示

任务队列

js中存在着多个任务队列，而且不一样的任务队列之间优先级不一样，优先级高的先被获取。同一队列中按照队列顺序被取用 任务队列分为两种类型

• macrotask queue（宏任务队列）：script（总体代码），setTimeout， setInterval，setImmediate，I/O，UI rendering
• microtask queue（微任务队列）：process.nextTick， Promises（这里指浏览器实现的原生 Promise）， MutationObserver

二者的区别：

• macrotask queue：存在多个，存在优先级
• microtask queue：仅一个，按照队列顺序执行

事实上，事件循环的顺序，决定了JavaScript代码的执行顺序。执行时从script(总体代码)开始第一次循环，以后全局上下文进入函数调用栈，直到执行栈清空，而后开始执行全部的microtask,当全部可执行的micro-task执行完毕以后。循环再次从macro-task开始，找到其中一个任务队列执行完毕，而后再执行全部的micro-task，这样一直循环下去。事件循环每次只会入栈一个 macrotask ，主线程执行完该任务后又会先检查 microtasks 队列并完成里面的全部任务后再执行 macrotask。

咱们举个例子验证下吧：

console.log('-----start-----')
setTimeout(()=>{
	console.log('setTimeout1-macroTask')
},1000)
Promise.resolve().then(() => {
    console.log('Promise1-microTask')
});
Promise.resolve().then(() => {
    console.log('Promise2-microTask')
});
setTimeout(()=>{
	console.log('setTimeout2-macroTask')
},100)
console.log('-----end-----')

输出结果
-----start-----
-----end-----
Promise1-microTask
Promise2-microTask
setTimeout2-microTask
setTimeout1-microTask

复制代码

具体过程，咱们稍微归纳下：

1. 遇到console.log,当即执行，输出“-----start-----”
2. setTimeout,交给异步模块处理，执行完后，回调放入macrotask queue中
3. 遇到Promise，执行then部分，回调放入microtask queue
4. 遇到Promise，执行then部分，回调放入microtask queue，此时的microtask queue队列中就有两个事件了
5. 仍是遇到setTimeout,一样交给异步处理模块，执行完后，回调一样是一个macrotask任务，但由于setTimeout2的时间要比setTimeout1的短，所以先输出setTimeout2
6. 再次遇到console.log,依旧当即执行，输出“-----end-----”
7. 执行结束