JS宏任务和微任务

在JavaScript中，宏任务（macro task）和微任务（micro task）是用来管理异步操作的概念。

宏任务通常包括一些异步操作，例如定时器回调、事件回调（如点击、鼠标移动等）、网络请求等。宏任务会被推到一个任务队列中，并按照先进先出的顺序执行。当主线程空闲时，会从宏任务队列中取出一个任务进行执行。

而微任务则是在当前任务执行结束后立即执行的任务。常见的微任务包括Promise回调和MutationObserver回调。微任务会优先于下一个宏任务执行，即在当前宏任务执行完毕前，所有微任务都会被执行完毕。

举个例子，假设有以下代码：

console.log('1');

setTimeout(function() {
  console.log('2');
}, 0);

Promise.resolve().then(function() {
  console.log('3');
});

console.log('4');

输出结果将会是：1 -> 4 -> 3 -> 2。

解释如下：

• 首先执行同步代码，打印出1和4；
• 然后遇到setTimeout，将其回调函数放入宏任务队列；
• 然后遇到Promise.resolve().then()，将其回调函数放入微任务队列；
• 当前宏任务执行完毕，检查微任务队列，发现有一个微任务，执行微任务队列中的回调函数，打印出3；
• 所有微任务执行完毕，开始下一个宏任务，从宏任务队列中取出setTimeout的回调函数，打印出2。

需要注意的是，当一个宏任务执行过程中产生新的微任务，这些微任务会在当前宏任务执行完之后立即执行。因此，宏任务和微任务的执行顺序是交替进行的。

它们之间有以下几个区别：

1. 执行时机：宏任务是在主线程空闲时执行的，而微任务是在当前任务执行结束后立即执行的。

2. 执行顺序：宏任务按照先进先出的顺序执行，而微任务则会在下一个宏任务执行前优先执行。

3. 嵌套关系：在一个宏任务中产生的新的微任务，将会在当前宏任务执行完成后立即执行。而新的宏任务则需要等待当前宏任务执行完毕后才会执行。

4. 优先级：微任务具有更高的优先级，它们会在当前宏任务执行完毕前尽早执行，以保证及时更新UI或处理其他紧急任务。这意味着在同一事件循环中，如果有微任务存在，那么它们会被连续执行，直到所有微任务都执行完毕，才会继续执行下一个宏任务。

常见的宏任务包括定时器回调、事件回调（如点击、鼠标移动等）、网络请求等。而常见的微任务包括Promise回调、MutationObserver回调等。

理解宏任务和微任务的执行顺序对于处理异步操作、避免阻塞主线程非常重要，能够帮助我们更好地编写高效的JavaScript代码。