JavaScript事件循环中，先执行宏任务，再清空微任务队列。例如：同步代码（宏任务）→ 微任务（如Promise.then）→ 下一个宏任务（如setTimeout）。输出顺序为1→4→3→2，因微任务在当前宏任务后立即执行，而setTimeout属于下一轮宏任务。嵌套微任务也会在本轮处理，如C→A→B所示。掌握此机制对异步编程至关重要。
JavaScript 是单线程语言，所有任务都在一个主线程上执行。为了协调异步操作（如定时器、网络请求、DOM 事件等）的执行，JS 引擎引入了事件循环机制（Event Loop）。理解事件循环的关键在于搞清楚宏任务（Macrotask）和微任务（Microtask）的执行顺序。
什么是宏任务与微任务？
宏任务和微任务是事件循环中两种不同类型的任务队列：
宏任务包括：整体代码块、setTimeout、setInterval、I/O 操作、UI 渲染、postMessage、setImmediate（Node.js）等。 微任务包括：Promise.then/catch/finally、MutationObserver（浏览器）、process.nextTick（Node.js）、queueMicrotask 等。
每轮事件循环中，JS 引擎会先执行一个宏任务，然后清空当前所有的微任务队列。只有当微任务队列为空时，才会进行下一轮宏任务。
执行顺序规则详解
事件循环遵循以下流程：
从宏任务队列中取出第一个任务执行（比如主代码块或 setTimeout 回调）。 在该宏任务执行过程中，遇到微任务时，将其加入微任务队列。 当前宏任务执行完毕后，立即执行微任务队列中的所有任务，直到队列清空。 微任务执行完后，可能触发 UI 渲染（浏览器环境），然后进入下一轮事件循环，取下一个宏任务。
简单说就是：一个宏任务 → 所有微任务 → 下一个宏任务 → 所有微任务……
实际例子解析
来看一段经典代码：
console.log('1');setTimeout(() => { console.log('2');}, 0);Promise.resolve().then(() => { console.log('3');});console.log('4');
输出顺序是：1 → 4 → 3 → 2
解释：
‘1’ 是同步代码，直接输出。 setTimeout 是宏任务，被放入宏任务队列。 Promise.then 是微任务，进入微任务队列。 ‘4’ 是同步代码，接着输出。 当前宏任务（主代码块）执行结束，开始执行微任务队列，输出 ‘3’。 微任务清空后，进入下一轮事件循环，执行 setTimeout 回调，输出 ‘2’。
嵌套情况下的执行顺序
微任务可以继续注册新的微任务，这些都会在本轮宏任务结束后依次执行：
Promise.resolve().then(() => { console.log('A'); Promise.resolve().then(() => { console.log('B'); });});console.log('C');
输出：C → A → B
因为 ‘A’ 输出后又注册了一个微任务 ‘B’，它仍属于当前宏任务后的微任务阶段，所以会在 ‘A’ 后立即执行，不会等到下一轮宏任务。
基本上就这些。掌握宏任务与微任务的区别以及事件循环的执行节奏，对理解异步编程、避免回调地狱、优化性能都至关重要。不复杂但容易忽略细节。
以上就是事件循环机制完全解读_微任务与宏任务的执行顺序的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1540591.html
微信扫一扫 
支付宝扫一扫 
