溫故知新(六八)微任務和巨集任務的區別

2021-10-24 10:24:42 字數 1672 閱讀 7435

微任務和巨集任務的區別

答案:微任務和巨集任務是非同步任務的兩個分類。

巨集任務:當前呼叫棧中執行的**成為巨集任務。(主**塊,定時器等)。

巨集任務中的事件放在 callback queue 中,由事件觸發執行緒維護;微任務的事件放在微任務佇列中,由 js 引擎執行緒維護。

在掛起任務時,js 引擎會將所有任務按照類別分到這兩個隊伍中,首先在巨集任務的佇列中取出第乙個任務,執行完畢後,取出微任務佇列中的所有任務順序執行;之後再取出巨集任務,周而復始,直到兩個佇列的任務都取完。

其實並不止乙個訊息佇列,有非同步佇列事件佇列,而事件佇列總是優先於非同步佇列被空閒下來的js執行緒取用

巨集任務一般是:包括整體**scriptsettimeoutsetintervali/oui render

微任務主要是:promiseobject.observemutationobserver

第一步,先按同步**順序執行

第二步,開始清空微任務佇列

第三步,開始清空巨集任務佇列(執行乙個巨集任務,把相關微任務新增入微任務佇列)

..........迴圈一直到執行完成

來個栗子:

console.log('sync statement 1');

promise.resolve().then(function() , 0);

}).then(function() );

settimeout(function() )

}, 0)

console.log('sync statement 2');

輸出:

//輸出:

sync statement 1

sync statement 2

micro task 1

micro task 2

macro task 2

micro task 3

macro task 1

解析 :

console.log('sync statement 1'); // 同步**,語句1

promise.resolve().then(function() , 0);

}).then(function() );

settimeout(function() )

}, 0)

console.log('sync statement 2'); // 同步**,語句11

再來乙個栗子:

console.log('1');//

settimeout(function () ).then(function () )

}, 0);

new promise(function (resolve) ).then(function () );

settimeout(function () ).then(function () );

})

答案:

156

2347

89

js的巨集任務和微任務

script 主程式 settimeout setinterval setimmediate i o操作 ui渲染 requestanimationframe promise 原生 mutationobserver process.nexttick mutation object.observe 事...

js裡的微任務和巨集任務

當js解析執行時,會被引擎分為兩類任務,同步任務 synchronous 和非同步任務 asynchronous 對於同步任務來說,會被推到執行棧按順序去執行這些任務。對於非同步任務來說,當其可以被執行時,會被放到乙個任務佇列 task queue 裡等待js引擎去執行。當執行棧中的所有同步任務完成...

Event Loop js中的巨集任務和微任務

個人理解,有錯誤望指出 event loop 事件迴圈,是指瀏覽器一種解決js單執行緒執行時不會阻塞的機制.先說一下執行順序 js 從上往下執行,遇到巨集任務,放到巨集任務佇列 遇到微任務,放到微任務佇列 從上到下執行完畢,檢測微任務佇列中是否有微任務存在,存在就執行,執行完清空微任務佇列,去執行巨...