前端宏任务和微任务的理解
JavaScript中分为同步任务和异步任务，而异步任务中又分为宏任务和微任务两种;
宏任务是由宿主（浏览器、Node）发起的，而微任务由 JS 自身发起。
代码示例：
function app() {
setTimeout(() => {
console.log("1-1");
Promise.resolve().then(() => {
console.log("2-1");
});
});
console.log("1-2");
Promise.resolve().then(() => {
console.log("1-3");
setTimeout(() => {
console.log("3-1");
});
});
}
app();
输出结果：
1-2
1-3
1-1
2-1
3-1
首先什么是宏任务和微任务：
宏任务: 常见的定时器,用户交互事件等等
微任务: Promise相关任务,MutationObserver等等
第一个原则
- 万物皆从全局上下文准备退出，全局的同步代码运行结束的这个时机开始
- 根据代码示例当执行完了console.log(“1-2”);的时候，意味着全局的上下文马上要退出了,因为此时全局的同步代码都执行完了,剩下的都是异步代码
第二个原则
- 同一层级下(不理解层级，可以先不管，后面会讲),微任务永远比宏任务先执行
- 即Promise.then比setTimeout先执行
- 所以先打印1-3,再打印1-1
怎么分辨层级？
- 属于同一个维度的代码,例如下面的func1和func2就属于同层级任务
setTimeout(func1)...
Promise.resolve().then(func2)...
- 下面这种fn1和fn2就不属于同一个层级的,因为fn2属于内部这个setTimeout的微任务队列,而fn1属于外部setTimeout的微任务队列
setTimeout(()=>{
Promise.resolve().then(fn1)
setTimeout(()=>{
Promise.resolve().then(fn2)
})})
总结：
js代码在执行时，首先执行同步任务，当同步任务执行完毕后，开始执行异步任务，异步任务执行时，首先按照代码的层级，同层级先执行微任务其次执行宏任务，以此类推~
根据上面的代码示例，调用app()方法时，先执行代码中的同步任务console.log(“1-2”);，打印出1-2，然后是异步任务，同层级异步任务有setTimeout(宏任务)和Promise(微任务)，按照同层级先微任务后宏任务的顺序，先执行Promise打印1-3，再执行setTimeout打印1-1，而后再按照执行顺序依次执行2-1和3-1。