js是單線程，非阻塞，試想如果是多線程，一個(gè)線程在某個(gè)DOM節(jié)點(diǎn)上添加內(nèi)容，另一個(gè)線程刪除了這個(gè)節(jié)點(diǎn)，這時(shí)瀏覽器應(yīng)該以哪個(gè)線程為準(zhǔn)？所以，為了避免復(fù)雜性，從一誕生，JavaScript就是單線程。

js的事件循環(huán)分為主線程(同步)和任務(wù)隊(duì)列(異步)，任務(wù)隊(duì)列里又分為宏任務(wù)和微任務(wù)

1.宏任務(wù)(macro-task)：

script（整體代碼），setTimeout，setInterval，setImmediate。

優(yōu)先級(jí)： setImmediate > setTimeout / setInterval

2.微任務(wù)(micro-task)：

Promise，mutationObserve(觀察DOM樹結(jié)構(gòu)發(fā)生變化時(shí)，做出相應(yīng)處理)，process.nextTick(Node.js 環(huán)境)。

優(yōu)先級(jí)：process.nextTick > Promise > MutationObserver

概述原理

同步>微任務(wù)>宏任務(wù)

1.宏任務(wù)、微任務(wù)都是任務(wù)隊(duì)列，一段代碼執(zhí)行時(shí)，會(huì)先執(zhí)行宏任務(wù)中的同步代碼。

2.進(jìn)行第一輪事件循環(huán)的時(shí)候會(huì)把js腳本當(dāng)成一個(gè)宏任務(wù)來運(yùn)行。

3.如果執(zhí)行中遇到setTimeout之類宏任務(wù)，那么就把這個(gè)setTimeout內(nèi)部的函數(shù)推入宏任務(wù)的隊(duì)列中，下一輪宏任務(wù)執(zhí)行時(shí)調(diào)用。

4.如果執(zhí)行中遇到 promise.then() 之類的微任務(wù)，就會(huì)推入到微任務(wù)隊(duì)列中，在本輪宏任務(wù)的同步代碼都執(zhí)行完成后，依次執(zhí)行所有的微任務(wù)。

5.當(dāng)執(zhí)行完全部的同步腳本以及微任務(wù)隊(duì)列中的事件，這一輪循環(huán)就結(jié)束了，開始第二輪循環(huán)，依次循環(huán)往復(fù)。

案例解析

<script>
setTimeout(() => {
    console.log('4')
}, 100)
new Promise((resolve) => {
    console.log('1')
    resolve("成功")
}).then(data => {
    console.log(data)
})
console.log('2')
</script>

解析

1.這段代碼作為宏任務(wù)，進(jìn)入主線程。

2.先遇到setTimeout之類宏任務(wù)，那么就把這個(gè)setTimeout內(nèi)部的函數(shù)推入宏任務(wù)的隊(duì)列中，下一輪宏任務(wù)執(zhí)行時(shí)調(diào)用。

3.接下來遇到了Promise，同步代碼立即執(zhí)行，回調(diào)函數(shù)分發(fā)到微任務(wù)隊(duì)列中。

4.遇到console.log(‘2’)，立即執(zhí)行，查看有無微任務(wù)，有一個(gè)then的回調(diào)函數(shù)，立即執(zhí)行。

5.第一輪宏任務(wù)執(zhí)行結(jié)束。

6.開始第二輪宏任務(wù)，執(zhí)行宏任務(wù)中的setTimeout函數(shù)。

將以上代碼升級(jí)下：

setTimeout(() => {
    console.log('1') 
}, 1000)
new Promise((resolve) => {
    console.log('2') 
    setTimeout((params) => {
        resolve("4")
        console.log("3"); 
    }, 100)
}).then(data => {
    console.log(data) 
})
console.log('5')