深入淺出任務(wù)隊列機制，非常淺

ideaa 發(fā)布于2019-08-23 15:13 / 1269人閱讀

摘要：即任務(wù)執(zhí)行完畢，接著執(zhí)行完所有的任務(wù)后，此時本輪循環(huán)結(jié)束，開始執(zhí)行。完畢之后接著下一輪循環(huán)。來道經(jīng)典題目答案是先走完所有同步代碼到微任務(wù)宏任務(wù)

前言

眾所周知，js是單線程的，就像我們不能一邊刷牙一邊洗臉（或許有些大佬真的可以），那么單線程如何才能規(guī)劃調(diào)度好要做的任務(wù)呢？
這個時候就要介紹一下這個任務(wù)機制了~

任務(wù)種類

宏任務(wù)

微任務(wù)

注意：瀏覽器環(huán)境和node環(huán)境是不一樣的，本文只討論瀏覽器環(huán)境

規(guī)則

執(zhí)行一個宏任務(wù)(先執(zhí)行同步代碼)-->執(zhí)行所有微任務(wù)-->UI render-->執(zhí)行下一個宏任務(wù)-->執(zhí)行所有微任務(wù)-->UI render-->

根據(jù)HTML Standard，一輪事件循環(huán)執(zhí)行結(jié)束之后，下輪事件循環(huán)執(zhí)行之前開始進行UI render。即：macro-task任務(wù)執(zhí)行完畢，接著執(zhí)行完所有的micro-task任務(wù)后，此時本輪循環(huán)結(jié)束，開始執(zhí)行UI render。UI render完畢之后接著下一輪循環(huán)。但是UI render不一定會執(zhí)行，因為需要考慮ui渲染消耗的性能已經(jīng)有沒有ui變動

需要注意的是，微任務(wù)是有優(yōu)先級的，就如同上面的表格從上往下一樣，nextTick>Promise>MutationObserver.

那么宏任務(wù)有沒有優(yōu)先級呢？？

大部分瀏覽器會把DOM事件回調(diào)優(yōu)先處理因為要提升用戶體驗給用戶反饋，其次是network IO操作的回調(diào)，再然后是UIrender，之后的順序就難以捉摸了，其實不同瀏覽器的表現(xiàn)也不太一樣，這里不做過多討論。

來道經(jīng)典題目

console.log("script start");

setTimeout(function() {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(function() {
  console.log("promise1");
}).then(function() {
  console.log("promise2");
});

console.log("script end");

答案是
"script start"、"script end"、"promise1"、"promise2"、"setTimeout"
先走完所有同步代碼-到promise微任務(wù)-宏任務(wù)setTimeout