[JavaScript知识库]Event Loop 事件循环

前言

在 JavaScript 中，任务被分为两种，一种 宏任务(MacroTask)， 一种 微任务(MicroTask)

• 宏任务：I/O、setTimeOut、setInterval、requestAnimationFrame

• 微任务：process.nextTick、Promise.then、catch、finally

JavaScript 中有主线程 和 调用栈（执行栈），所有任务都会放入调用栈中等待主线程执行

同步任务和异步任务分别进入不同的任务队列，同步的进入主线程，异步的进入 Event Table 并注册函数。

每次单个宏任务执行完毕后，检查微任务队列是否为空，不为空的话按照先入先出的规则全部执行完微任务后，再设置微任务队列为 null。然后再执行宏任务，如此循环。

宏任务是在微任务之后才执行的（因为微任务实际上是宏任务的其中一个步骤）

重点：微任务会全部执行完，而宏任务会一个一个执行

举例分析

看一段代码

setTimeout(function() {
    console.log('setTimeout');
})

new Promise(function(resolve) {
    console.log('promise');
}).then(function() {
    console.log('then');
})

console.log('console');

// promise console then setTimeout

• 第一步：代码进入主线程；遇到 setTimeout，将其回调函数注册，并分发到宏任务

• 第二步：new Promise 时传入的代码立即执行，输出 promise，遇到 then 将其分发到微任务

• 第三步：继续往下执行，输出 console

• 第四步：主线程执行栈已经清空，执行全部微任务（按先进先出原则），输出 then

• 第五步：微任务执行完毕，再找宏任务（一个个找），输出 setTimeout，整体执行完毕

async/await

async / await 本质上还是基于 Promise 的封装，而 Promise 是属于微任务的一种

async 函数在 await 之前的代码是同步执行的。可以理解为 await 之前的代码属于 new Promise 时传入的代码，await 之后的所有代码都是在 Promise.then 中的回调

参考

一次弄懂Event Loop

史上最全 HTTP 请求

微任务、宏任务与Event-Loop