J*aScript事件循环_宏任务与微任务详解

J*aScript通过事件循环实现异步，宏任务（如setTimeout）执行后清空所有微任务（如Promise.then），再进入下一宏任务，确保微任务优先于渲染执行。

javascript事件循环_宏任务与微任务详解

J*aScript 是单线程语言，靠事件循环（Event Loop）实现异步操作的调度。理解宏任务（MacroTask）与微任务（MicroTask）是掌握 J*aScript 异步执行机制的关键。

事件循环的基本流程

J*aScript 引擎在执行代码时，会先运行同步代码，遇到异步任务则将其交给浏览器或 Node.js 环境处理，并注册回调函数。当异步操作完成，回调会被放入任务队列。事件循环不断检查调用栈是否为空，一旦空了，就从任务队列中取出下一个任务执行。

关键点在于：事件循环每次从宏任务队列中取一个任务执行，执行完后，立即清空当前所有的微任务队列，然后再回到宏任务队列取下一个任务。

宏任务（MacroTask）有哪些？

宏任务是事件循环中一次完整的执行单元。每个宏任务执行完毕后，浏览器可以进行渲染更新。

setTimeout 回调
setInterval 回调
I/O 操作
UI 渲染
script 标签整体代码（初始同步代码也被视为一个宏任务）

微任务（MicroTask）有哪些？

微任务在当前宏任务执行结束后立即执行，且会全部执行完才继续下一个宏任务。

Promise.then/catch/finally 回调
MutationObserver（DOM 变化监听）
queueMicrotask() API
process.nextTick()（Node.js 环境，优先级更高）

执行顺序：宏任务 vs 微任务

来看一个经典例子：

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，放入微任务队列
当前宏任务结束，检查微任务队列，执行 then 回调输出 '3'
进入下一轮事件循环，执行 setTimeout 回调输出 '2'

再看一个复杂一点的例子：

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

380 查看详情度加剪辑

console.log('start');

setTimeout(() => {
  console.log('timeout1');
  Promise.resolve().then(() => {
    console.log('promise in timeout');
  });
}, 0);

Promise.resolve().then(() => {
  console.log('promise1');
  setTimeout(() => {
    console.log('timeout in promise');
  }, 0);
});

console.log('end');

输出顺序：start → end → promise1 → timeout1 → promise in timeout → timeout in promise

分析：

同步代码输出 start、end
微任务：第一个 Promise.then 输出 promise1
宏任务队列：第一个 setTimeout 触发，输出 timeout1
此时该宏任务内部产生微任务：Promise.then 输出 promise in timeout
下一轮宏任务：setTimeout 在 promise 中注册的那个触发

注意：微任务总是在当前宏任务末尾被集中执行，即使它是在 setTimeout 回调中创建的。

常见误区与注意事项

很多人误以为 setTimeout(..., 0) 就是“立刻执行”，其实它只是尽快加入宏任务队列，必须等当前所有同步和微任务完成。

微任务的高优先级意味着滥用 Promise.then 做大量计算可能阻塞渲染，因为浏览器只在宏任务之间重绘页面。

在实际开发中，若想让某些操作延迟到当前所有异步回调之后执行，可以用 queueMicrotask 或 Promise.resolve().then() 包裹。

基本上就这些。搞清楚宏任务和微任务的执行时机，就能准确预测异步代码的输出顺序。不复杂但容易忽略细节。

以上就是J*aScript事件循环_宏任务与微任务详解的详细内容，更多请关注其它相关文章！

# 有何 # 推广和seo # 台州网站推广优化软件 # 鞍山seo外包排名前十 # seo外包赚钱吗 # 景观人物网站建设流程 # 智能网站推广软件 # 色彩营销推广文案 # seo公司16认火星 # 单品站seo # Seo优化计费模式 # 迭代 # 下一轮 # 清空 # 如何处理 # 如何使用 # javascript # 它是 # 第一个 # 是在 # 回调 # 重绘 # 异步任务 # 栈 # mac # 回调函数 # 浏览器 # node # node.js # js # java

相关栏目：【 Google疑问12 】【 Facebook疑问10 】【优化推广96088 】【技术知识133117 】【 IDC资讯59369 】【网络运营7196 】【 IT资讯61894 】

2025-11-22

4008744355

J*aScript事件循环_宏任务与微任务详解

事件循环的基本流程

宏任务（MacroTask）有哪些？

微任务（MicroTask）有哪些？

执行顺序：宏任务 vs 微任务

常见误区与注意事项

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

4008744355

服务/方案/案例/支持

关于我们

Notice