• 1. 先執行同步代碼（整體 script 是第一個宏任務）
• 2. 后執行異步代碼
• 3. 先執行同層級微任務
• 4. 再執行同層級宏任務
• 5. 同步代碼屬于第一個宏任務
• 6. 異步任務分為宏任務和微任務

宏任務主要有：script(整體代碼)、setTimeout、setInterval、I/O、UI 交互事件、postMessage、MessageChannel、setImmediate(Node.js 環境)。

微任務主要有：Promise.then、Promise.catch、Promise.finally、 MutationObserver、queueMicrotask、 process.nextTick(Node.js 環境)。

console.log(1);
setTimeout(function() {
    console.log(2);
}, 0);
new Promise(function(resolve) {
    console.log(3);
    resolve(Date.now());
}).then(function() {
    console.log(4);
});
console.log(5);
setTimeout(function() {
    new Promise(function(resolve) {
        console.log(6);
        resolve(Date.now());
    }).then(function() {
        console.log(7);
    });
}, 0);

執行步驟如下：

• 1.執行 log(1)，輸出 1；

• 2.遇到 setTimeout，將回調的代碼 log(2)添加到宏任務中等待執行；

• 3.執行 console.log(3)，將 then 中的 log(4)添加到微任務中；

• 4.執行 log(5)，輸出 5；

• 5.遇到 setTimeout，將回調的代碼 log(6, 7)添加到宏任務中；

• 6.宏任務的一個任務執行完畢，查看微任務隊列中是否存在任務，存在一個微任務 log(4)（在步驟 3 中添加的），執行輸出 4；

• 7.取出下一個宏任務 log(2)執行，輸出 2；

• 8.宏任務的一個任務執行完畢，查看微任務隊列中是否存在任務，不存在；

• 9.取出下一個宏任務執行，執行 log(6)，將 then 中的 log(7)添加到微任務中；

• 10.宏任務執行完畢，存在一個微任務 log(7)（在步驟 9 中添加的），執行輸出 7；

因此，最終的輸出順序為：1, 3, 5, 4, 2, 6, 7;

參考鏈接：前端中的事件循環eventloop機制
這次,十分鐘把宏任務和微任務講清楚
這一次，徹底弄懂 JavaScript 執行機制