前言：

js是一門(mén)單線程語(yǔ)言，所以它本身是不可能異步的，但是js的宿主環(huán)境（比如瀏覽器、node）是多線程，宿主環(huán)境通過(guò)某種方式（事件驅(qū)動(dòng)）使得js具備了異步的屬性。而在js中，我們一般將所有的任務(wù)都分成兩類(lèi)，一種是同步任務(wù)，另外一種是異步任務(wù)。而在異步任務(wù)中，又有著更加細(xì)致的分類(lèi)，那就是微任務(wù)和宏任務(wù)

1.概念

1.1宏任務(wù)

宏任務(wù) ---- setTimeout、setInterval、DOM事件、AJAX請(qǐng)求

瀏覽器為了能夠使得JS內(nèi)部task與DOM任務(wù)能夠有序的執(zhí)行，會(huì)在一個(gè)task執(zhí)行結(jié)束后，在下一個(gè) task 執(zhí)行開(kāi)始前，對(duì)頁(yè)面進(jìn)行重新渲染 （task->渲染->task->…）

1.2微任務(wù)

微任務(wù) ---- Promise、async/await

微任務(wù)通常來(lái)說(shuō)就是需要在當(dāng)前 同步任務(wù) 執(zhí)行結(jié)束后立即執(zhí)行的任務(wù)，比如對(duì)一系列動(dòng)作做出反饋，或者是需要異步的執(zhí)行任務(wù)而又不需要分配一個(gè)新的任務(wù)，這樣便可以減小一點(diǎn)性能的開(kāi)銷(xiāo)。

2.執(zhí)行順序

先來(lái)看一段代碼，在來(lái)探討執(zhí)行順序：

   console.log(1)
    setTimeout(() => {
      console.log(2)
    })
    Promise.resolve().then(() => {
      console.log(3)
    })
    console.log(4)

上面段代碼打印的結(jié)果為1 4 3 2 。從上面代碼，可以得出他們的執(zhí)行順序是:

? 先執(zhí)行同步代碼，遇到異步宏任務(wù)時(shí)候則將異步宏任務(wù)放入宏任務(wù)隊(duì)列中,遇到異步微任務(wù)的時(shí)候則將異步微任務(wù)放入微任務(wù)列表中，當(dāng)所有的同步代碼執(zhí)行完畢后，在將異步微任務(wù)從列表中調(diào)入主線程執(zhí)行，異步微任務(wù)執(zhí)行完畢之后再將異步宏任務(wù)從隊(duì)列中調(diào)入主線程執(zhí)行，一直循環(huán)到素有任務(wù)執(zhí)行完畢。

注意：微任務(wù)執(zhí)行下先于頁(yè)面渲染的

3.任務(wù)關(guān)系

宏任務(wù)是主流，當(dāng)js開(kāi)始被執(zhí)行的時(shí)候，就是開(kāi)啟一個(gè)宏任務(wù)，在宏任務(wù)中執(zhí)行一條一條的指令，宏任務(wù)可以同時(shí)擁有多個(gè)，但是會(huì)按照順序一個(gè)一個(gè)執(zhí)行。

每一個(gè)宏任務(wù)，后面都可以跟著一個(gè)微任務(wù)隊(duì)列，如果微任務(wù)隊(duì)列中有指令或者方法，則先執(zhí)行。如果沒(méi)有，則開(kāi)始執(zhí)行下一個(gè)宏任務(wù)，知道所有的宏任務(wù)執(zhí)行完畢。

4.任務(wù)詳解

為什么有了宏任務(wù)后，還是會(huì)有微任務(wù)的存在？那是因?yàn)楹耆蝿?wù)太占用性能，當(dāng)需要一些較早就準(zhǔn)備好的方法，排在最后才執(zhí)行的時(shí)候，又不想新增一個(gè)宏任務(wù)，那么就可以把這些方法，一個(gè)一個(gè)的放在微任務(wù)隊(duì)列里面，在這個(gè)宏任務(wù)中的代碼執(zhí)行完后，就會(huì)執(zhí)行微任務(wù)隊(duì)列。

因此當(dāng)前同步代碼執(zhí)行，遇到異步任務(wù)，如果是異步宏任務(wù)，放入下一輪宏任務(wù)隊(duì)列，是異步微任務(wù)，放入微任務(wù)隊(duì)列跟在當(dāng)前宏任務(wù)屁股后面。微任務(wù)相當(dāng)于宏任務(wù)的小尾巴，因此當(dāng)前宏任務(wù)執(zhí)行完，在它后面等著的異步微任務(wù)就會(huì)被立刻放入隊(duì)列繼續(xù)執(zhí)行。而異步的宏任務(wù)需要等到下一輪，從而造成了異步中微任務(wù)在宏任務(wù)之前執(zhí)行的情況。

到此這篇關(guān)于JavaScript 微任務(wù)和宏任務(wù)講解的文章就介紹到這了,更多相關(guān)JavaScript 微任務(wù)和宏任務(wù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論