别再说宏任务和微任务难懂了！看了就会！

宏任务和微任务是JavaScript中两个重要的概念，它们决定着任务的执行顺序。理解宏任务和微任务对于理解JavaScript的事件循环非常重要。

宏任务

宏任务是指那些需要较长时间才能完成的任务，比如：

• 脚本代码（script）
• setTimeout
• setInterval
• I/O操作

宏任务在任务队列中排队执行，先入先出。这意味着，宏任务只有在前一个宏任务执行完成后才能执行。

微任务

微任务是指那些需要立即执行的任务，比如：

• Promise
• MutationObserver
• process.nextTick（仅限Node.js）

微任务在任务队列中排队执行，先入先出。但是，微任务会在宏任务之前执行。这意味着，当一个宏任务正在执行时，如果队列中还有微任务，那么这些微任务会先于下一个宏任务执行。

执行过程

JavaScript引擎会维护一个任务队列，其中包含了需要执行的宏任务和微任务。当主线程空闲时，它会从任务队列中取出第一个任务并执行。如果这个任务是宏任务，那么它会一直执行，直到完成或者遇到新的微任务。如果这个任务是微任务，那么它会立即执行，然后主线程会继续执行下一个宏任务。

举例说明

以下是一个例子，演示了宏任务和微任务的执行顺序：

console.log('宏任务1'); //宏任务

setTimeout(() => { //宏任务
  console.log('宏任务2');
}, 0);

Promise.resolve().then(() => { //微任务
  console.log('微任务1');
});

console.log('宏任务3'); //宏任务

MutationObserver(() => { //微任务
  console.log('微任务2');
}).observe(document.body, {
  childList: true
});

setTimeout(() => { //宏任务
  console.log('宏任务4');
}, 0);

输出结果：

宏任务1
宏任务3
微任务1
微任务2
宏任务2
宏任务4

在这个例子中，宏任务1、宏任务3和宏任务4是按照顺序执行的。微任务1和微任务2是在宏任务2之前执行的。这是因为微任务会在宏任务之前执行。

总结

宏任务和微任务是JavaScript事件循环中的两个重要概念，它们决定着任务的执行顺序。宏任务包括script、setTimeout、setInterval，而微任务包括promise、mutationobserver，以及process.nextTick（仅限Node.js）。宏任务在任务队列中排队执行，先入先出。微任务也在任务队列中排队执行，先入先出。但是，微任务会在宏任务之前执行。