彻底弄懂 JavaScript 执行机制，同步任务、异步任务、微任务、宏任务、事件轮询

用我的理解，帮助大家弄懂 js 的执行机制

在此之前，我对 js 的执行机制根本都不了解，按我的想法就是从上到下一行一行执行，对 setTimeOut
等定时器的执行机制也漠不关心，反正能执行就行，知道我最近在学习 promise 才了解到 js 的执行机制，下面我就用我的理解来简单介绍下。

首先，JavaScript 是一个单线程的脚本语言。
单线程，就像我们平时去超市买东西，结账的时候需要一个个排队等待结账一样。

但是在等待的时候一定会很无聊，这个时候我们想边等待边玩会手机，玩了一会手机，时间过得很快，就马上排到了我们结账，然后我们就顺利的结完账走出了超市，这里排队就像是 js 中的同步任务，需要一个个进行，玩手机就像是 js 中的异步任务。

同步任务： 指的是在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。
异步任务： 指的是不进入主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

1. 同步和异步任务在不同的执行"场所"，同步的进入主线程，异步的进入Event Table执行并注册函数。
2. 当指定的异步事情完成时，Event Table会将这个函数移入Event Queue。
3. 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，推入主线程执行。
4. js引擎的monitoring process进程会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event
Queue那里检查是否有等待被调用的函数。上述过程会不断重复，也就是常说的Event Loop(事件循环也可以叫事件轮询)。

其中异步任务又包括宏任务（macrotask ）和微任务（microtask ）

宏任务：

1. script
2. setTimeout
3. setInterval
4. setImmediate
5. I/O
6. UI rendering

setTimeout(fn,0) 是指当主线程任务完成、所有微任务也完成的情况下就会立即执行

微任务:
7. process.nextTick(node 独有)
8. promise
9. MutationObserver

JavaScript 执行机制：

主线程任务——>微任务——>宏任务

如果宏任务里还有微任就继续执行宏任务里的微任务，如果宏任务中的微任务中还有宏任务就在依次进行

主线程任务——>微任务——>宏任务——>宏任务里的微任务——>宏任务里的微任务中的宏任务——>知道任务全部完成

我的理解是在同级下，微任务要优先于宏任务执行

下面让我们来分析一段较复杂的代码，看看你是否掌握了 js 的执行机制

console.log('1');
setTimeout(function() {
    console.log('2');
    new Promise(function(resolve) {
        console.log('3');
        resolve();
    }).then(function() {
        console.log('4')
    })
})
new Promise(function(resolve) {
    console.log('5');
    resolve();
}).then(function() {
    console.log('6')
})

setTimeout(function() {
    console.log('7');
    new Promise(function(resolve) {
        console.log('8');
    }).then(function() {
        console.log('9')
    })
})
console.log('10');

// 1 5 10 6 2 3 4 7 8

分析：

第一轮：

1. 首先是进入主线程，遇到 console.log(‘1’)，打印1
2. 然后遇到 promise 中的 console.log(‘5’); 直接执行，打印5
3. 再遇到 console.log(‘10’)，打印10

第二轮：

1. 然后运行微任务，我们看到这里面的微任务有 promise，依次执行。
2. 首先promise完成态，走到 then，遇到 console.log(‘6’)，打印6

第三轮：

1. 然后运行宏任务，我们看到这里面的微任务有 setTimeout，依次执行。
2. 遇到 console.log(‘2’)，打印2，然后发现里面还有个微任务 promise，先打印3，等完成后，走到 then，打印4
3. 遇到第二个 setTimeout 打印7，然后发现里面还有个微任务 promise，先打印8，由于没有完成态resolve()，所以不打印9

写在最后

1. js的异步

我们从最开头就说javascript是一门单线程语言，不管是什么新框架新语法糖实现的所谓异步，其实都是用同步的方法去模拟的，牢牢把握住单线程这点非常重要。

2. 事件循环Event Loop

事件循环是js实现异步的一种方法，也是js的执行机制。

3. javascript的执行和运行

执行和运行有很大的区别，javascript在不同的环境下，比如node，浏览器，Ringo等等，执行方式是不同的。而运行大多指javascript解析引擎，是统一的。

4. setImmediate

微任务和宏任务还有很多种类，比如setImmediate等等，执行都是有共同点的，有兴趣的同学可以自行了解。

5. 最后的最后

1. javascript是一门单线程语言
2. Event Loop是javascript的执行机制
牢牢把握两个基本点，以认真学习javascript为中心，早日实现成为前端高手的伟大梦想！

参考文献：

这一次，彻底弄懂 JavaScript 执行机制（别还不知道什么是宏任务，什么是微任务）

微任务、宏任务与Event-Loop