微任务与宏任务的区别是什么?

最新推荐文章于 2025-06-17 08:13:33 发布

让你五行代码

最新推荐文章于 2025-06-17 08:13:33 发布

阅读量522

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/zy1992As/article/details/131914041

前端开发中，JavaScript将任务分为宏任务和微任务来管理异步代码执行顺序。宏任务包括setTimeout、DOM事件回调等，执行后检查并执行所有微任务。微任务如Promise回调、MutationObserver，优先级高于宏任务，总是在当前宏任务结束前执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前端开发中，JavaScript运行时环境通常将任务分为两类：微任务(Microtasks)和宏任务(Macrotasks)，这是为了管理和执行异步代码。理解它们的区别很重要，因为它们决定了代码执行的顺序。

　　1.宏任务(Macrotasks)

　　宏任务是由浏览器提供的异步任务，包括但不限于：

　　·setTimeout和setInterval回调函数

　　·DOM 事件回调函数(如click、input等)

　　·XMLHttpRequest 和 fetch 等网络请求的回调函数

　　·requestAnimationFrame 回调函数

　　宏任务的执行是在当前执行栈执行完毕后进行。当浏览器执行完一个宏任务后，会检查微任务队列是否有待处理的微任务，如果有，则会优先执行微任务队列中的所有微任务，然后再执行下一个宏任务。

　　2.微任务(Microtasks)

　　微任务也是异步任务，但它的优先级比宏任务高。常见的微任务包括：

　　·Promise的resolve和reject回调函数

　　·MutationObserver回调函数

　　·process.nextTick(Node.js环境)

　　微任务会在当前宏任务执行结束后、下一个宏任务执行之前执行。

　　现在，让我们通过代码演示来说明微任务和宏任务的区别：

<button id="btn">点击触发异步任务</button>
<script>
  function performMacroTask() {
    console.log('执行宏任务');
  }

  function performMicroTask() {
    console.log('执行微任务');
  }

  document.getElementById('btn').addEventListener('click', function () {
    console.log('点击事件触发');
    
    // 宏任务：模拟异步任务
    setTimeout(function () {
      performMacroTask();
    }, 0);

    // 微任务：Promise的resolve
    Promise.resolve().then(function () {
      performMicroTask();
    });

    console.log('点击事件结束');
  });

  console.log('脚本执行结束');
</script>

　　假设我们在浏览器中运行上述代码并点击按钮，输出的顺序将是：

点击事件触发
点击事件结束
脚本执行结束
执行微任务
执行宏任务

　　解释执行过程：

　　1.点击按钮触发点击事件，输出"点击事件触发"。

　　2.执行点击事件内的同步代码，输出"点击事件结束"。

　　3.执行外部脚本的同步代码，输出"脚本执行结束"。

　　4.执行微任务队列，输出"执行微任务"。

　　5.执行宏任务队列，输出"执行宏任务"。

　　这个例子演示了异步任务的执行顺序。微任务会在当前宏任务的末尾执行，而宏任务会在当前执行栈执行完毕后执行。请注意，微任务总是在下一个宏任务之前执行，所以它们的优先级较高。