在JavaScript中异步任务里的微任务和宏任务的特点和生命周期

JavaScript中，微任务和宏任务是异步任务的两种类型，它们都存在于事件循环中，但有着不同的特点和生命周期。

宏任务（Macro-task）：

宏任务包括：script（整体代码）, setTimeout, setInterval, setImmediate, I/O, UI rendering, requestAnimationFrame。

特点：

• 会在每个事件循环的开始处执行，即每次循环开始时，都会执行一个宏任务。
• 如果有多个宏任务，会按照它们在事件循环中的顺序一个接一个地执行。
• 每次宏任务执行完之后，浏览器会进行一次页面重绘。

微任务（Micro-task）：

微任务包括：Promise.then/catch/finally, process.nextTick, MutationObserver。

特点：

• 微任务可以由任何宏任务调度程序产生的任何宏任务调度程序调度。
• 每次宏任务执行结束后，微任务队列中的所有任务都会被执行，直到队列清空。
• 微任务的优先级高于宏任务，当一个宏任务执行完后，如果存在微任务，那么微任务会被立即执行。
• 如果有多个微任务存在，那么它们会按照添加到队列的顺序一个接一个地执行。

微任务和宏任务的主要区别在于它们的生命周期和执行时机。宏任务在每次事件循环开始时执行，而微任务则在每次宏任务执行结束后立即执行，直到队列清空。因此，微任务可以由任何宏任务调度程序调度，并且它们的优先级高于宏任务。在事件循环中，当一个宏任务执行完后，如果存在微任务，那么微任务会被立即执行。

代码执行流程： 主线程 => 微任务 => 宏任务

首先我们先来看一段代码，看一下代码的执行顺序。

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

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

console.log('main');

执行顺序是 log(‘main’) log(‘promise’) log(‘promise2’) log(‘setTimeout’);

setTimeout(() => {
  Promise.resolve().then(() => {
    console.log('promise')
  })
},0);

Promise.resolve().then(() => {
  setTimeout(() => {
    console.log('setTimeout')
  },0)
});

console.log('main');

执行顺序是 log(‘main’) log(‘promise’) log(‘setTimeout’);

除了广义的同步任务和异步任务，JavaScript 单线程中的任务可以细分为宏任务和微任务

1. 宏任务进入主线程，执行过程中会收集微任务加入微任务队列。
2. 宏任务执行完成之后，立马执行微任务中的任务。微任务执行过程中将再次收集宏任务，并加入宏任务队列。
3. 反复执行1，2步骤
4. 宏任务想要执行的话必须要等微任务 全部 执行完毕后再能执行

宏任务和微任务的根本区别

• 宏任务：DOM渲染后触发，如setTimeout
• 微任务：DOM渲染前触发，如Promise

JS代码执行的顺序：

1. 首先执行同步代码；
2. 同步代码执行结束后，call stack被清空，开启envet loop；
3. 执行微任务；
4. 触发DOM元素渲染；
5. 触发enevt loop；
6. 执行宏任务。

看一个例子

async function async1(){
    console.log('async1 start')   // 顺序2
    await async2()
    console.log('async1 end')    // 顺序6
}

async function async2(){
    console.log('async2')      // 顺序3
}

console.log('script start')     // 顺序1

setTimeout(function(){
    console.log('setTimeout')   // 顺序8
}, 0)

async1()

// 初始化 promise 时，传入的函数会立刻被执行
new Promise(function(resolve){
    console.log('promise1')        // 顺序4
    resolve()
}).then(function(){
    console.log('promise2')    // 顺序7
})

console.log('script end')    // 顺序5

再看一个例子

setTimeout(()=>{
    console.log("1")
    Promise.resolve().then(()=>{
        console.log("2")
    })
})
console.log("3")
Promise.resolve().then(()=>{
    console.log("4")
    setTimeout(()=>{
        console.log("5")
    })
})

分析一下上面的代码

第一个执行的是setTimeout，setTimeOut是一个宏任务，所以会先放到宏任务队列（注意：现在还不会执行，因为js脚本代码还没有执行完）

第二个执行的是console.log(“3”) //此时会直接输出3

第三个执行的是promise.resolve()，此时的then是一个微任务，所以会放到微任务队列（此时也不会执行）

js脚本代码代码执行完毕后就会先执行微任务队列中的任务

第四个执行的是微任务队列中的console.log(“4”)//此时会直接输出4

但此函数还没有执行完，后面还接了一个定时器函数，又因为此函数是一个宏任务，所以也会放到宏任务队列中去（此任务排在第二个执行）

此时微任务队列已经没有任务了，则会开始执行宏任务队列

首先执行的就是上面的setTimeout（），会直接输出 1

后面接了一个promise.then，这个函数就被放到了微任务队列中，因为微任务队列中有任务了就会先执行微任务队列，那么就会输出2

最后执行宏任务队列的定时器，则输出 5

因此最后输出的结果为 3 4 1 2 5