宏任务、微任务与事件循环 Event Loop

104 阅读3分钟

什么是事件循环

JavaScript 是一门单线程的语言,也就是说代码在执行的任何时候都只有一个主线程来处理所有的任务。

JavaScript中,所有的任务都可以分为两种:

  • 同步任务:立即执行的任务,同步任务一般会直接进入到主线程中执行
  • 异步任务:无法立刻返回结果,需要花一定时间才能返回的任务,比如 ajax 网络请求,setTimeout 定时函数等

它们的执行顺序如下,

  • 任务进入执行栈,如果是同步任务,则放到主线程;
  • 如果是异步任务,则把异步任务放到 Event Table 中执行,然后注册回调函数;
  • 等到异步任务执行结束后,Event Table 会将这个函数移入 Event Queue(事件队列);
  • 当主线程内的任务都执行完毕为空,就会去事件队列读取对应的函数,推入主线程执行;
  • 不断重复以上过程。

执行栈与事件队列

执行栈

当一个脚本第一次执行的时候,js 引擎会解析这段代码,并将其中的同步代码按照执行顺序加入 执行栈 中,然后从头开始执行。

如果当前执行的是一个方法,那么 js 会向执行栈中添加这个方法的执行环境,然后进入这个执行环境继续执行其中的代码。当这个执行环境中的代码执行完毕并返回结果后,js 会退出这个执行环境并把这个执行环境销毁,回到上一个方法的执行环境。

这个过程反复进行,直到执行栈中的代码全部执行完毕。

事件队列

以上的过程说的都是同步代码的执行,如果是一个异步代码执行后会如何呢?

js 引擎遇到一个异步事件后并不会一直等待其返回结果,而是会将这个事件挂起,继续执行执行栈中的其他任务。

当一个异步事件返回结果后,js 会将这个事件加入与当前执行栈不同的另一个队列,我们称之为事件队列。

被放入事件队列不会立刻执行其回调,而是等待当前执行栈中的所有任务都执行完毕, 主线程处于闲置状态时,主线程会去查找事件队列是否有任务。

如果有,那么主线程会从中取出排在第一位的事件,并把这个事件对应的回调放入执行栈中,然后执行其中的同步代码...,如此反复,这样就形成了一个无限的循环。这就是这个过程被称为“事件循环(Event Loop)”的原因。

宏任务(macro task) 和微任务(micro task)

异步任务之间并不相同,因此他们的执行优先级也有区别。不同的异步任务被分为两类:微任务 (micro task) 和宏任务 (macro task)

以下事件属于宏任务:

  • setInterval()
  • setTimeout()

以下事件属于微任务:

  • promise.then()
  • Async/Await(实际就是promise)
  • new MutaionObserver()