深刻淺出任務隊列機制，很是淺

前言

衆所周知，js是單線程的，就像咱們不能一邊刷牙一邊洗臉（或許有些大佬真的能夠），那麼單線程如何才能規劃調度好要作的任務呢？
這個時候就要介紹一下這個任務機制了~

任務種類

• 宏任務

• 微任務

注意：瀏覽器環境和node環境是不同的，本文只討論瀏覽器環境

規則

執行一個宏任務(先執行同步代碼)-->執行全部微任務-->UI render-->執行下一個宏任務-->執行全部微任務-->UI render-->

根據HTML Standard，一輪事件循環執行結束以後，下輪事件循環執行以前開始進行UI render。即：macro-task任務執行完畢，接着執行完全部的micro-task任務後，此時本輪循環結束，開始執行UI render。UI render完畢以後接着下一輪循環。可是UI render不必定會執行，由於須要考慮ui渲染消耗的性能已經有沒有ui變更

須要注意的是，微任務是有優先級的，就如同上面的表格從上往下同樣，nextTick>Promise>MutationObserver.

• 那麼宏任務有沒有優先級呢？？

大部分瀏覽器會把DOM事件回調優先處理 由於要提高用戶體驗 給用戶反饋，其次是network IO操做的回調，再而後是UIrender，以後的順序就難以捉摸了，其實不一樣瀏覽器的表現也不太同樣，這裏不作過多討論。

來道經典題目

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微任務-宏任務setTimeout