全面解析微任务与宏任务，掌握面试高频考点

微任务与宏任务：浏览器执行机制的核心

在现代 Web 开发中，JavaScript 作为一种单线程语言，其执行机制至关重要。微任务和宏任务是理解浏览器如何执行代码的关键概念。

微任务

微任务是 JavaScript 代码中优先级最高的执行单元，它们在主线程的事件循环中紧随同步任务执行，并在宏任务之前。微任务主要包括：

• Promise 决议回调
• MutationObserver 回调
• setTimeout(0) 和 setInterval(0) 中的回调（仅当它们不是在事件处理程序内调用时）

宏任务

宏任务是 JavaScript 代码中优先级较低的执行单元，它们在主线程的事件循环中紧随微任务执行。宏任务主要包括：

• UI 渲染
• setTimeout() 和 setInterval() 中的回调（当它们在事件处理程序内调用时）
• HTTP 请求
• DOM 事件处理程序（例如，click、mouseenter）

事件循环：浏览器执行流程

事件循环是浏览器执行 JavaScript 代码的核心机制。它是一个不断循环的过程，包含以下步骤：

1. 执行同步任务（如脚本）
2. 执行微任务
3. 执行宏任务
4. 渲染页面
5. 监听事件

在每个循环中，浏览器将依次执行所有待处理的同步任务、微任务和宏任务，然后渲染页面。

面试中的重要性

微任务和宏任务的概念在 JavaScript 面试中经常被问及，因为它们反映了对 JavaScript 执行机制的深入理解。理解这些概念可以帮助候选人展示他们对以下方面的掌握：

• JavaScript 单线程执行模型
• 事件循环的运作方式
• 异步编程的细微差别
• 常见的 JavaScript 面试问题，例如：微任务和宏任务执行顺序

掌握微任务与宏任务

要掌握微任务和宏任务，建议采取以下步骤：

• 阅读文档： 仔细阅读 MDN 文档和其他资源，以深入了解这些概念。
• 实践实验： 使用代码示例和在线工具来实际操作和观察微任务和宏任务的行为。
• 理解面试问题： 研究常见的 JavaScript 面试问题，并练习回答有关微任务和宏任务的问题。

示例代码

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

setTimeout(() => {
  console.log("宏任务 1");
}, 0);

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

console.log("同步任务 1");

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

Promise.resolve().then(() => {
  console.log("微任务 2");
});

console.log("同步任务 2");

输出：

同步任务 1
微任务 1
同步任务 2
微任务 2
宏任务 1
宏任务 2

这个示例展示了同步任务、微任务和宏任务的执行顺序。同步任务最先执行，其次是微任务，最后是宏任务。

结论

深入理解微任务和宏任务对于掌握 JavaScript 执行机制至关重要。通过阅读文档、实践实验和研究面试问题，开发人员可以增强他们对这些概念的掌握，从而在面试中展现出强大的技术能力。