js里的微任务和宏任务

当JS解析执行时，会被引擎分为两类任务，同步任务（synchronous） 和 异步任务（asynchronous）。

对于同步任务来说，会被推到执行栈按顺序去执行这些任务。
对于异步任务来说，当其可以被执行时，会被放到一个 任务队列（task queue） 里等待JS引擎去执行。

当执行栈中的所有同步任务完成后，JS引擎才会去任务队列里查看是否有任务存在，并将任务放到执行栈中去执行，执行完了又会去任务队列里查看是否有已经可以执行的任务。这种循环检查的机制，就叫做事件循环(Event Loop)。

对于任务队列，其实是有更细的分类。其被分为 微任务（microtask）队列 & 宏任务（macrotask）队列

 

宏任务: setTimeout、setInterval等，会被放在宏任务（macrotask）队列。

微任务: Promise的then、Mutation Observer等，会被放在微任务（microtask）队列。

Event Loop（js的循环机制）的执行顺序是：

1. 首先执行执行栈里的任务。
2. 执行栈清空后，检查微任务（microtask）队列，将可执行的微任务全部执行。
3. 取宏任务（macrotask）队列中的第一项执行。
4. 回到第二步。

注意： 微任务队列每次全执行，宏任务队列每次只取一项执行。

setTimeout(() => {
    console.log('我是第一个宏任务');
    Promise.resolve().then(() => {
        console.log('我是第一个宏任务里的第一个微任务');
    });
    Promise.resolve().then(() => {
        console.log('我是第一个宏任务里的第二个微任务');
    });
}, 0);
 
setTimeout(() => {
    console.log('我是第二个宏任务');
}, 0);
 
Promise.resolve().then(() => {
    console.log('我是第一个微任务');
});
 
console.log('执行同步任务');
最后的执行结果是：

// 执行同步任务
// 我是第一个微任务
// 我是第一个宏任务
// 我是第一个宏任务里的第一个微任务
// 我是第一个宏任务里的第二个微任务
// 我是第二个宏任务