JavaScript之事件队列（event loop）

一、前言

我们都知道，javaScript是一门单线程、非阻塞的脚本语言。

单线程意味着，在程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行。

为什么要单线程呢？

因为作为浏览器脚本语言JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程。

非阻塞是当代码需要进行一项异步任务（无法立刻返回结果，需要花一定时间才能返回的任务，如I/O事件）的时候，主线程会挂起（pending）这个任务，然后在异步任务返回结果的时候再根据一定规则去执行相应的回调。

那么是怎么实现“非阻塞”的呢？

接下来我们就探讨一下~~~~

二、事件队列（Task Queue）

首先我们来看一个简单的例子：

console.log(1);

setTimeout(function(){
    console.log(2);
}，1000)

console.log(3)

//1
//3
//2

以上代码中：

console.log(1)和console.log(3)是同步代码，放在执行栈中按照顺序执行；

setTimeout是异步事件，js引擎会将它挂起，继续执行下面的同步代码，等到一秒钟之后，js会将这个事件加入与当前执行栈不同的另一个队列，我们称之为事件队列（Task Queue）。被放入事件队列不会立刻执行其回调，而是等待当前执行栈中的所有任务都执行完毕， 主线程处于闲置状态时，主线程会去查找事件队列是否有任务。如果有，那么主线程会从中取出排在第一位的事件，并把这个事件对应的回调放入执行栈中，然后执行其中的同步代码...，如此反复，这样就形成了一个无限的循环。

三、宏任务（macro task）和微任务（micro task）

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

宏任务（macro task），浏览器为了能够使得JS内部task与DOM任务能够有序的执行，会在一个task执行结束后，在下一个 task 执行开始前，对页面进行重新渲染 （task->渲染->task->...）
鼠标点击会触发一个事件回调，需要执行一个宏任务，然后解析HTMl。

微任务（micro task ），微任务通常来说就是需要在当前 task 执行结束后立即执行的任务，比如对一系列动作做出反馈，或或者是需要异步的执行任务而又不需要分配一个新的 task，这样便可以减小一点性能的开销。所有微任务总会在下一个宏任务之前全部执行完毕。

以下事件属于宏任务：

• setInterval()
• setTimeout()

以下事件属于微任务

• new Promise()
• new MutaionObserver()
• process.nextTick