JavaScript 微任務和宏任務講解

Posted on by

前言：

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

1.概念

1.1宏任務

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

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

1.2微任務

微任務 —- Promise、async/await

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

2.執行順序

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

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

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

​ 先執行同步代碼，遇到異步宏任務時候則將異步宏任務放入宏任務隊列中,遇到異步微任務的時候則將異步微任務放入微任務列表中，當所有的同步代碼執行完畢後，在將異步微任務從列表中調入主線程執行，異步微任務執行完畢之後再將異步宏任務從隊列中調入主線程執行，一直循環到素有任務執行完畢。

註意：微任務執行下先於頁面渲染的

3.任務關系

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

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

4.任務詳解

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

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

到此這篇關於JavaScript 微任務和宏任務講解的文章就介紹到這瞭,更多相關JavaScript 微任務和宏任務內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：