在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步骤
宏任务想要执行的话必须要等微任务全部执行完毕后再能执行

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

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

JS代码执行的顺序：

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

看一个例子

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