什么是宏任务和微任务？它们在事件循环中如何执行？

1.宏任务和微任务的核心执行顺序是：先执行所有同步代码，再清空微任务队列，然后执行一个宏任务，再清空微任务，如此循环；2.微任务（如promise.then、queuemicrotask）优先级高于宏任务（如settimeout、i/o回调），确保异步逻辑的即时性和一致性；3.理解该机制能精准调试异步问题、优化性能（避免卡顿）、控制执行时序、编写可靠异步逻辑，并深入掌握框架底层原理。

宏任务和微任务是JavaScript事件循环（Event Loop）中的两个核心概念，它们决定了异步代码的执行顺序。简单来说，宏任务是较大粒度的任务，例如定时器回调、用户交互事件等，而微任务则是更小、优先级更高的任务，比如Promise的回调。事件循环会先执行完当前所有微任务，然后才去处理下一个宏任务。

理解这个机制，对于我们写出高性能、可预测的异步代码至关重要。

解决方案

要深入理解宏任务和微任务，我们得从JavaScript的单线程特性说起。JS引擎在执行代码时，有一个主线程（Call Stack），它一次只能处理一个任务。但现代Web应用需要处理大量异步操作，比如网络请求、定时器、用户交互等，这些操作如果都阻塞主线程，页面就会卡死。事件循环就是用来解决这个问题的。

当主线程上的同步代码执行完毕后，事件循环就开始工作了。它会不断地检查两个队列：宏任务队列（Macrotask Queue）和微任务队列（Microtask Queue）。

宏任务包括但不限于：

• setTimeout

  和

  setInterval

  的回调函数
• I/O 操作（例如网络请求完成后的回调）
• UI 渲染事件（如点击、滚动）

• requestAnimationFrame

  (虽然它与渲染紧密相关，但通常被认为是宏任务周期的一部分)

• setImmediate

  (Node.js特有)

微任务则包括：

• Promise.then()

  ,

  .catch()

  ,

  .finally()

  的回调函数

• MutationObserver

  的回调函数

• queueMicrotask

  API

• process.nextTick

  (Node.js特有)

事件循环的执行流程大致是这样的：

1. 执行当前主线程上所有同步代码。
2. 当同步代码执行完毕，主线程空闲时，会检查微任务队列。
3. 清空微任务队列：它会把所有在微任务队列中的任务一个接一个地取出来执行，直到微任务队列为空。在这个过程中，如果又有新的微任务产生，它们也会被立即加入队列并在当前循环中执行。
4. 当微任务队列清空后，事件循环会从宏任务队列中取出一个（注意：通常是一个）任务来执行。
5. 这个宏任务执行完毕后，又会回到第2步，再次检查并清空微任务队列。
6. 如此循环往复，直到两个队列都为空。

这个“先清空所有微任务，再执行一个宏任务”的机制，是理解JS异步执行顺序的关键。它意味着，即使你有一个

setTimeout(fn, 0)

Promise.resolve().then(fn)

setTimeout

为什么微任务比宏任务优先级更高？

在我看来，微任务被赋予更高优先级，这是设计者深思熟虑的结果，主要为了确保程序状态的即时一致性。你想啊，Promise这种机制，它代表了一个异步操作的最终结果。如果一个Promise链式调用，它的

then

举个例子，你可能在一个函数里发起了一个网络请求，这个请求返回了一个Promise。你希望在请求成功后立即更新UI或者执行一些依赖于这个结果的后续操作。如果

then

微任务的这种高优先级，使得Promise链能够在一个“原子性”的执行单元内完成，即在一个宏任务执行结束后，所有相关的微任务都会被处理掉，确保了当前操作的所有副作用都已完成，才去处理下一个独立的宏任务。这就像是，在一个大任务（宏任务）的间隙，先把你手头所有紧急的小修小补（微任务）都搞定，再开始下一个大活儿。这对于保持程序内部逻辑的连贯性、避免不必要的中间状态非常有用。

常见的宏任务和微任务有哪些？

实际开发中，我们最常打交道的宏任务和微任务主要有这些：

常见的宏任务：

• setTimeout

  和

  setInterval

  : 这是最经典的宏任务了。它们的回调函数会被推迟到未来的某个宏任务周期执行。
  

  Bandy AI

  全球领先的电商设计Agent

  下载

  console.log('开始');
  
  setTimeout(() => {
    console.log('setTimeout 回调'); // 这是宏任务
  }, 0);
  
  Promise.resolve().then(() => {
    console.log('Promise 微任务'); // 这是微任务
  });
  
  console.log('结束');
  // 输出顺序：开始 -> 结束 -> Promise 微任务 -> setTimeout 回调

• I/O 操作: 比如文件读写、网络请求（XMLHttpRequest、fetch等）的回调。当数据准备好时，相应的回调会被放入宏任务队列。

  // 假设这是一个模拟的网络请求
  function fetchData() {
    return new Promise(resolve => {
      // 模拟网络延迟，这是一个宏任务的触发
      setTimeout(() => {
        console.log('网络请求数据已获取');
        resolve('一些数据');
      }, 10);
    });
  }
  
  fetchData().then(data => {
    console.log('处理获取到的数据:', data); // Promise.then是微任务
  });
  console.log('请求已发送');
  // 输出顺序：请求已发送 -> 网络请求数据已获取 -> 处理获取到的数据: 一些数据

• UI 渲染事件: 用户的交互，比如点击（

  click

  ）、滚动（

  scroll

  ）、鼠标移动（

  mousemove

  ）等事件的回调函数，它们都是宏任务。

常见的微任务：

• Promise.then()

  ,

  .catch()

  ,

  .finally()

  : 这是最常见的微任务来源。它们的回调会在当前宏任务执行结束后立即执行。

  new Promise(resolve => {
    console.log('Promise构造函数');
    resolve();
  }).then(() => {
    console.log('Promise.then');
  });
  
  console.log('同步代码');
  // 输出顺序：Promise构造函数 -> 同步代码 -> Promise.then

• MutationObserver

  : 用于监听DOM树变化的API。当DOM发生变化时，它的回调会被放入微任务队列。这对于需要对DOM变化做出即时响应，但又不想阻塞渲染的场景非常有用。

• queueMicrotask

  : 这是一个相对较新的API，它允许你显式地将一个函数放入微任务队列。当你需要确保某个操作在当前任务结束后立即执行，但又不想引入Promise的开销时，它就很有用了。

  console.log('1');
  queueMicrotask(() => {
    console.log('2 (microtask)');
  });
  console.log('3');
  // 输出顺序：1 -> 3 -> 2 (microtask)

• process.nextTick

  (Node.js特有): 在Node.js环境中，

  process.nextTick

  的回调比Promise的微任务优先级还要高，它会在当前操作的末尾立即执行，甚至在当前宏任务的任何微任务之前。但在浏览器环境中，我们通常不考虑它。

理解宏任务和微任务对前端开发有什么实际意义？

我个人觉得，理解宏任务和微任务，不仅仅是深入JS运行机制的必要一环，更是我们日常前端开发中解决疑难杂症、优化性能、编写健壮代码的“瑞士军刀”。

1. 调试异步代码的利器: 当你的异步代码执行顺序不符合预期时，比如一个变量的值在某个异步操作后没有及时更新，或者UI状态出现了奇怪的闪烁，很可能就是你对宏任务和微任务的执行顺序理解有偏差。明确知道哪些是宏任务，哪些是微任务，以及它们在事件循环中的优先级，能帮助你快速定位问题，预测代码行为。

2. 优化用户体验和性能:

   • 避免UI卡顿: 长时间的同步计算会阻塞主线程，导致页面卡顿。即使是大量微任务的连续执行，也可能导致UI无法及时更新。理解事件循环能让你知道何时UI会重新渲染（通常是在一个宏任务执行完毕，所有微任务清空后），从而合理地拆分任务，避免“长任务”，利用

     setTimeout

     或

     requestAnimationFrame

     将耗时操作分解到不同的宏任务周期，给浏览器留出渲染时间。
   • 精确控制时序: 有时候你希望某个操作尽可能快地执行，但又不能阻塞当前同步代码。这时，选择微任务（如

     Promise.resolve().then()

     或

     queueMicrotask

     ）就比宏任务（

     setTimeout(fn, 0)

     ）更合适，因为它能确保在当前宏任务结束后立即执行，而不是等到下一个宏任务周期。

3. 编写更可靠的异步逻辑: 当你处理复杂的异步流程，比如多个Promise的链式调用、同时监听DOM变化和网络请求时，对宏任务和微任务的清晰认知，能帮助你设计出更健壮的逻辑，避免竞态条件（race condition）和不可预测的行为。例如，你可能需要确保某个DOM更新在所有数据处理完成后才发生，那么将DOM更新放在一个微任务中，或者确保它依赖的数据处理也是通过微任务完成，就能保证时序的正确性。

4. 理解框架和库的底层机制: 许多前端框架（如Vue、React的异步更新机制）和库（如Lodash的

   debounce

   和

   throttle

   实现）都或多或少地利用了事件循环的原理来优化性能或控制执行时机。当你深入理解这些底层机制时，就能更好地使用它们，甚至在必要时进行定制。

总的来说，这不仅仅是理论知识，更是我们写好JavaScript，尤其是前端JavaScript的基石。当你面对那些“为什么我的

console.log