微任务与宏任务

微任务和宏任务都是 JavaScript 中的任务队列，用于处理异步代码。

微任务是指在当前任务执行完成后立即执行的任务。常见的微任务包括 Promise 的回调函数、MutationObserver 的回调函数等。微任务会在浏览器的重绘前执行。

宏任务是指需要在当前任务队列执行完毕后再执行的任务。常见的宏任务包括 setTimeout、setInterval、I/O 操作等。宏任务会在浏览器的重绘前执行。

在 JavaScript 中，每个宏任务执行完毕后，会检查是否有微任务需要执行，如果有则立即执行微任务队列中的所有微任务。然后浏览器会进行页面的重绘。

例如，以下代码展示了微任务和宏任务的执行顺序：

console.log('1');

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

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

console.log('4');

输出结果为：1, 4, 3, 2。

解释：

1. 执行同步代码，输出 1。
2. 遇到 setTimeout 宏任务，将其放入宏任务队列，继续执行同步代码，输出 4。
3. 遇到 Promise.resolve().then 微任务，将其放入微任务队列。
4. 宏任务执行完毕，检查微任务队列，发现有微任务，依次执行微任务队列中的微任务，输出 3。
5. 微任务执行完毕，浏览器进行页面的重绘。
6. 页面重绘完成后，执行宏任务队列中的下一个宏任务，即 setTimeout 回调函数，输出 2。