浏览器是现代互联网应用的重要平台之一，而浏览器的工作机制对于 web 应用程序的性能和用户体验至关重要。在浏览器中，事件循环（Event Loop）是一个核心概念，它决定了 JavaScript 代码的执行顺序，其中微任务（Microtasks）和宏任务（Macrotasks）是事件循环中的两个重要部分。
什么是事件循环？
事件循环是浏览器多任务处理的核心机制之一。它负责管理 JavaScript 代码的执行顺序，确保异步操作和用户交互能够在正确的时间被执行。事件循环的工作原理可以概括为不断地从任务队列中取出任务并执行，直到任务队列为空。
在 JavaScript 中，事件循环可以被形象地描述为一个循环，在每次迭代中，它会执行以下步骤：
- 从宏任务队列中取出一个宏任务，执行它。
- 检查微任务队列，如果微任务队列不为空，则依次执行微任务队列中的任务。
- 更新渲染，然后回到第 1 步，继续下一个宏任务的执行。
这个循环会一直运行，确保 JavaScript 代码在浏览器中按照正确的顺序执行。
微任务（Microtasks）是什么？
微任务是事件循环中的一种特殊任务，它具有高优先级，并且会在当前宏任务执行完成后立即执行。微任务通常包括以下几种情况：
- Promise 的
then方法注册的回调函数。 MutationObserver观察器的回调函数。process.nextTick（Node.js 环境）。
微任务的特点是它们会在当前任务（宏任务）完成后立即执行，而不需要等待其他任务的执行。这使得微任务非常适合处理需要尽快执行的操作，例如更新 DOM 或处理异步操作的结果。
宏任务（Macrotasks）是什么？
宏任务是事件循环中的另一种任务，它通常包括以下几种情况：
- 定时器回调函数（
setTimeout、setInterval等）。 - 用户交互事件处理函数（点击事件、键盘事件等）。
- 网络请求完成、文件读写完成等 I/O 任务的回调函数。
- 主线程中的代码执行。
与微任务不同，宏任务会在当前宏任务执行完毕后才执行。这意味着宏任务的执行优先级较低，它们必须等待当前宏任务执行完成后才能被处理。因此，如果一个宏任务执行时间过长，可能会导致页面失去响应。
为什么设计微任务与宏任务？
浏览器事件循环中引入微任务与宏任务的设计，是为了实现异步操作和用户交互的高效管理。以下是一些原因：
- 响应性：微任务允许开发者在当前任务结束后立即执行一些操作，从而确保页面的响应性。例如，可以使用微任务来更新 DOM，以便用户能够即时看到页面变化。
- 异步编程：微任务和宏任务的设计提供了一种更灵活的异步编程模型。开发者可以根据任务的优先级和需求将代码划分为微任务和宏任务，从而更好地控制代码的执行顺序。
- 避免页面卡死：由于宏任务的执行需要等待当前宏任务完成，如果一个宏任务执行时间过长，可能会导致页面卡死，无法响应用户交互。微任务的引入可以在宏任务执行中插入一些任务，确保页面保持响应。
- 事件循环的可预测性：微任务与宏任务的引入使事件循环的执行顺序更加可预测和稳定。这对于开发者来说是非常重要的，因为它能够避免一些难以调试的问题。
微任务和宏任务的执行顺序
了解微任务和宏任务的执行顺序对于编写可靠的异步代码至关重要。事件循环中，微任务会在当前宏任务执行完毕后立即执行，而宏任务则会在当前宏任务执行完毕后再执行。这导致了一个规则：微任务始终在宏任务之前执行。
让我们通过一个示例来说明微任务和宏任务的执行顺序：
javascript
console.log('Start');
setTimeout(() => {
console.log('setTimeout');
}, 0);
Promise.resolve().then(() => {
console.log('Promise');
});
console.log('End');在这个示例中，首先输出 "Start"，然后创建了一个宏任务 setTimeout 和一个微任务 Promise。然后，输出 "End"。最后，在事件循环的下一轮迭代中，微任务会在宏任务执行之前输出 "Promise"，然后宏任务执行输出 "setTimeout"。
这个执行顺序的理解对于编写异步代码和解决异步问题非常关键，开发者需要根据微任务和宏任务的特性来合理安排代码的执行顺序，以达到预期的效果。
总结
微任务与宏任务是浏览器事件循环中的两个重要概念，它们的设计使得异步操作和用户交互得以高效管理。了解它们的执行顺序和如何使用它们对于编写可靠的异步代码至关重要。通过合理利用微任务和宏任务，开发者可以提高 web 应用程序的性能和用户体验，确保页面的响应性和稳定性。