如何進行JavaScript微任務和宏任務的分析

這篇文章將為大家詳細講解有關如何進行JavaScript微任務和宏任務的分析，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

前言：

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微任務和宏任務的分析就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。