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

最新推荐文章于 2024-07-26 11:41:15 发布

i_阿文

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量261

点赞数 3

文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/m0_73577884/article/details/139918128

版权

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

1.宏任务（Macrotasks）

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

setTimeout和setinteval回调函数；
DOM事件回调函数（如click、input等）；
XMLHttpRequest和fetch等网络请求的回调函数；
requestAnimationFrame回调函数；

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

2.微任务（Microtasks）

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

Promise的resolve和reject回调函数；
MutationObserver回调函数；
process,nextTick（Node.js环境）；

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

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

<body>
  <button id="btn">点击触发异步任务</button>
</body>
<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>

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

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

解释执行过程：

执行外部脚本的同步代码：输出“脚本执行结束”；
点击按钮触发点击事件：输出“点击事件触发”；
执行点击事件内的同步代码：输出“点击事件结束”；
执行微任务队列：输出“执行微任务”；
执行宏任务队列：输出“执行宏任务”；

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

i_阿文

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
微任务与宏任务的区别是什么？

在前端开发中，JavaScript运行时环境通常将任务分为两类：微任务（Microtasks）和红任务（Macrotasks），这是为了管理和执行异步代码。当浏览器执行完一个宏任务后，会检查微任务队列是否有待处理的微任务。如果有，则会优先执行微任务队列中的所有微任务，然后在执行下一个宏任务。微任务会在当前宏任务的末尾执行，而宏任务会在当前执行栈执行完毕后执行。注意，微任务总是在下一个宏任务之前执行，所以它们的优先级较高。微任务会在当前宏任务执行结束后，下一个宏任务执行之前执行。
复制链接

扫一扫