阅读 160

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

文章分类
前端
文章标签