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

1.概念

1.1宏任務

宏任務 ---- setTimeout、setInterval、DOM事件、AJAX請求

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

1.2微任務

微任務 ---- Promise、async/await

微任務通常來說就是需要在當前同步任務執(zhí)行結束后立即執(zhí)行的任務，比如對一系列動作做出反饋，或者是需要異步的執(zhí)行任務而又不需要分配一個新的任務，這樣便可以減小一點性能的開銷。

2.執(zhí)行順序

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

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

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

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

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

3.任務關系

宏任務是主流，當js開始被執(zhí)行的時候，就是開啟一個宏任務，在宏任務中執(zhí)行一條一條的指令，宏任務可以同時擁有多個，但是會按照順序一個一個執(zhí)行。

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

4.任務詳解

為什么有了宏任務后，還是會有微任務的存在？那是因為宏任務太占用性能，當需要一些較早就準備好的方法，排在最后才執(zhí)行的時候，又不想新增一個宏任務，那么就可以把這些方法，一個一個的放在微任務隊列里面，在這個宏任務中的代碼執(zhí)行完后，就會執(zhí)行微任務隊列。

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

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

您可能感興趣的文章: