第JS異步的執(zhí)行順序分析1.js的執(zhí)行順序，先同步后異步2.異步中任務(wù)隊(duì)列的執(zhí)行順序：先微任務(wù)microtask隊(duì)列，再宏任務(wù)macrotask隊(duì)列3.調(diào)用Promise中的resolve，reject屬于微任務(wù)隊(duì)列，setTimeout屬于宏任務(wù)隊(duì)列

注意以上都是隊(duì)列，先進(jìn)先出。

微任務(wù)包括`process.nextTick`，`promise`，`MutationObserver`。

宏任務(wù)包括`script`，`setTimeout`，`setInterval`，`setImmediate`，`I/O`，`UIrendering`。

在node環(huán)境下，process.nextTick的優(yōu)先級(jí)高于Promise，也就是可以簡(jiǎn)單理解為：在宏任務(wù)結(jié)束后會(huì)先執(zhí)行微任務(wù)隊(duì)列中的nextTickQueue部分，然后才會(huì)執(zhí)行微任務(wù)中的Promise部分。

javascript事件機(jī)制

console.log('scriptstart')

asyncfunctionasync1(){

awaitasync2()

console.log('async1end')

asyncfunctionasync2(){

console.log('async2end')

async1()

setTimeout(function(){

console.log('setTimeout')

},0)

newPromise(resolve={

console.log('Promise')

resolve()

.then(function(){

console.log('promise1')

.then(function(){

console.log('promise2')

console.log('scriptend')

執(zhí)行結(jié)果？

分析：

首先執(zhí)行同步代碼：

1.首先執(zhí)行console.log(scriptstart)2.執(zhí)行async1()的時(shí)候，馬上執(zhí)行了async2函數(shù)：console.log(async2end)3.順序執(zhí)行newPromise()中的同步函數(shù)：console.log(Promise)4.最后執(zhí)行console.log(scriptend)。

上面是同步執(zhí)行的代碼，然后看剩下的異步執(zhí)行的代碼：

首先，setTimeout是宏觀任務(wù)，排除到最后，剩下微觀任務(wù)：

asyncfunctionasync1(){

awaitasync2()

console.log('async1end')

newPromise(resolve={

resolve()

.then(function(){

console.log('promise1')

.then(function(){

console.log('promise2')

})

5.然后根據(jù)先入先出的對(duì)列方式，先執(zhí)行awaitasync2()后面阻礙的函數(shù)console.log(async1end)6.執(zhí)行promise的resolve函數(shù)

newPromise(resolve={

resolve()

})

也就是接下來(lái)的兩個(gè)then：console.log(promise1)----console.log(promise2)；

7.最后執(zhí)行的是setTimeout函數(shù)console.log(setTimeout)；

綜上所述，以上代碼執(zhí)行的順序是：

1.scriptstart2.async2end3.Promise4.scriptend5.async1end6.promise17.promise28.setTimeout

(function(){

setTimeout(()={

console.log(0);

newPromise(resolve={

console.log(1);

setTimeout(()={

resolve();

Promise.resolve().then(()=console.log(2));

console.log(3);

Promise.resolve().then(()=console.log(4));

}).then(()={

console.log(5);

Promise.resolve().then(()=console.log(8));

setTimeout(()=console.log(6));

console.log(7);

})();

1.同樣先執(zhí)行同步代碼，且先把setTimeout去掉：

newPromise(resolve={

console.log(1);

Promise.resolve().then(()=console.log(4));//微觀任務(wù)

}).then(()={//then函數(shù)是執(zhí)行對(duì)應(yīng)的resolve的時(shí)候才執(zhí)行的

console.log(5);

Promise.resolve().then(()=console.log(8));//微觀任務(wù)

});console.log(7);

可以看出先執(zhí)行：console.log(1);console.log(7);

2.執(zhí)行微任務(wù)Promise.resolve().then(()=console.log(4));

代碼變成了：

(function(){

setTimeout(()={

console.log(0);

newPromise(resolve={

setTimeout(()={

resolve();

Promise.resolve().then(()=console.log(2));

console.log(3);

}).then(()={

console.log(5);

Promise.resolve().then(()=console.log(8));//這句是多加的

setTimeout(()=console.log(6));

})();

只剩下宏觀任務(wù)（微觀任務(wù)在宏觀任務(wù)里，也就是宏觀任務(wù)外面不在有微觀任務(wù)了）

3.執(zhí)行console.log(0);4.再執(zhí)行newPromise中的setTimeout，先執(zhí)行里面的同步函數(shù)：console.log(3)5.再執(zhí)行上面的resolve，對(duì)應(yīng)的是下面的then函數(shù)：

then(()={

console.log(5);

Promise.resolve().then(()=console.log(8));//這句是多加的

setTimeout(()=console.log(6));

}

所以先執(zhí)行console.log(5);

剩下的都是微觀任務(wù)和宏觀任務(wù)，先看微觀任務(wù)：

newPromise(resolve={

resolve();

Promise.resolve().then(()=console.log(2));

}).then(()={

Promise.resolve().then(()=console.log(8));

setTimeout(()=console.log(6));

});

所以根據(jù)隊(duì)列中的微觀任務(wù)順序先執(zhí)行：console.log(2)，在執(zhí)行then中的console.log(8)；

最后再執(zhí)行console.log(6)

綜上所述，結(jié)果為

1/7/4/0/3/5/2/8/6

(function(){

setTimeout(()={

console.log(0);

newPromise(resolve={

console.log(1);

setTimeout(()={

resolve();

Promise.resolve().then(()={

console.log(2);

setTimeout(()=console.log(3));

Promise.resolve().then(()=console.log(4));

Promise.resolve().then(()=console.log(5));

}).then(()={

console.log(6);

Promise.resolve().then(()=console.log(7));

setTimeout(()=console.log(8));

console.log(9);

})();

解釋如下：【同步異步；微任務(wù)宏任務(wù)】第一步：打印出1、9；如圖

圖a

由圖a中的任務(wù)隊(duì)列可知：

第二步：執(zhí)行微任務(wù)3，打印出5；

第三步：執(zhí)行宏任務(wù)1，打印出0，

第四步：開(kāi)始執(zhí)行宏任務(wù)2；如圖：

圖b

第五步：由圖b中的任務(wù)隊(duì)列可知，執(zhí)行微任務(wù)4，打印出6，如圖：

圖c

第六步：由圖c中的