首页 > 文章 > 前端

JavaScript事件循环：宏任务与微任务解析

时间：2025-12-31 23:07:35 169浏览收藏

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《JavaScript事件循环：宏任务与微任务详解》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

JavaScript通过事件循环实现异步，宏任务执行后立即清空微任务队列，微任务优先级高于宏任务，如console.log('1')、setTimeout、Promise.then混合执行时输出1→4→3→2。

JavaScript事件循环_宏任务与微任务深度解析

JavaScript 是单线程语言，依靠事件循环（Event Loop）实现异步操作的调度。理解宏任务（MacroTask）与微任务（MicroTask）是掌握事件循环机制的关键。下面深入解析它们的执行顺序和实际影响。

宏任务与微任务的基本概念

在 JavaScript 中，任务被分为两类：宏任务和微任务。

宏任务包括：

整体代码块（script）
setTimeout 回调
setInterval 回调
I/O 操作
UI 渲染

微任务包括：

Promise.then/catch/finally 回调
MutationObserver 回调
queueMicrotask()
process.nextTick()（Node.js 环境）

每次事件循环中，主线程执行完当前宏任务后，会清空所有可用的微任务队列，然后再执行下一个宏任务。

事件循环的执行流程

事件循环遵循以下步骤：

从宏任务队列中取出一个任务执行
执行过程中遇到微任务，将其加入微任务队列
当前宏任务执行完毕后，立即执行微任务队列中的所有任务
微任务清空后，进行 UI 渲染（如有需要），然后开始下一轮循环

这意味着微任务总是在当前宏任务结束后、下一个宏任务开始前被执行，且具有更高的优先级。

典型代码示例分析

看下面这段代码：

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');

输出结果为：1 → 4 → 3 → 2

解释：

'1' 和 '4' 是同步代码，直接输出
setTimeout 属于宏任务，进入宏任务队列
Promise.then 是微任务，进入微任务队列
当前宏任务（整体 script）执行完后，先执行微任务 '3'
下一轮事件循环再执行宏任务 '2'

微任务的连续触发与性能影响

微任务会在当前宏任务结束后立即全部执行，这可能导致一些意外情况。

例如递归使用 queueMicrotask 或 Promise：

let count = 0;
function recursiveMicrotask() {
  if (count     count++;
    Promise.resolve().then(recursiveMicrotask);
    console.log('micro', count);
  }
}
recursiveMicrotask();

输出：micro 1 → micro 2 → micro 3，全部在一次宏任务后完成。

这种模式会阻塞主线程，直到所有微任务执行完毕，期间无法响应用户交互或渲染页面。

基本上就这些。宏任务和微任务的协作构成了 JavaScript 异步执行的核心机制，正确理解它们有助于写出更可靠、可预测的异步代码。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

前往漫画官网入口并下载 ➜