關於宏任務、微任務和事件循環

我想不少人都見過或聽過這種題。

setTimeout(() => { console.log('settimeout') });

new Promise((resolve) => {
    resolve('');
    console.log('promise-resolve');
}).then(() => {
    console.log('promise-then');
});

console.log('script');

當你把上述的代碼塊放到瀏覽器中執行的時候會發現輸出順序是：

promise-resolve
script
promise-then
settimeout

爲何會是這樣的輸出順序呢？這就要提到事件循環、宏任務和微任務的概念了。衆所周知，JavaScript是一個單線程的語言，單線程意味着代碼會自上而下依次執行，若是有一個耗時的操做，那麼頁面就會卡死，基於此，便有了異步的概念，而宏任務、微任務都是屬於異步任務。而JavaScript一次性不能處理多個任務，因此便須要一個能有效執行各個任務的邏輯，這即是事件循環。

每次循環都會先執行宏任務，而後查找是否有可執行的微任務，有的話就執行微任務，不然執行下一個宏任務，以此循環。

宏任務：Script代碼塊，setTimeout，setInterval，I/O操做，setImmediate。
微任務：Promise，process.nextTick，MutationObserver