JavaScript通过事件循环实现异步，先执行同步代码，再处理回调；宏任务（如setTimeout）每轮取一个，微任务（如Promise.then）在宏任务后立即清空。输出顺序为1→4→3→2，因微任务优先级高；但滥用微任务可能阻塞UI更新或引发“微任务风暴”，需合理选择执行时机。
JavaScript 是单线程语言，通过事件循环（Event Loop）实现异步操作的处理。理解事件循环和微任务队列是掌握 JavaScript 异步执行机制的关键。
事件循环的基本原理
JavaScript 引擎在执行代码时，会先运行同步任务，这些任务在主线程上按顺序执行。当遇到异步操作（如 setTimeout、Promise、DOM 事件等），它们会被挂起并交给浏览器的其他模块处理。一旦这些异步任务完成，对应的回调函数就会被放入任务队列中，等待事件循环调度执行。
事件循环持续检查调用栈是否为空。如果为空，就从任务队列中取出一个任务推入调用栈执行。这个过程不断重复，形成“循环”。
宏任务与微任务的区别
在事件循环中，任务分为两类：宏任务（macrotask）和微任务（microtask）。
立即学习“Java免费学习笔记（深入）”；
宏任务 包括：整体 script 代码、setTimeout、setInterval、I/O、UI 渲染等。 微任务 包括：Promise.then/catch/finally 回调、MutationObserver、queueMicrotask 等。
每次事件循环迭代中，只会从宏任务队列中取一个任务执行。但在该宏任务执行结束后，会清空当前所有的微任务队列——也就是说，所有已存在的微任务会连续执行，直到微任务队列为空，才会进行下一轮宏任务。
微任务队列的执行时机
微任务的关键特性是在**每个宏任务执行完后立即执行**。这意味着微任务具有更高的优先级。
例如：
console.log('1');setTimeout(() => { console.log('2');}, 0);Promise.resolve().then(() => { console.log('3');});console.log('4');
输出顺序是：1 → 4 → 3 → 2。
解释：
‘1’ 和 ‘4’ 是同步代码，最先输出。 Promise 的 then 回调是微任务，在当前宏任务结束后立即执行。 setTimeout 是宏任务，要等到下一个事件循环周期才执行。
实际应用中的注意事项
由于微任务执行时机早于下一个宏任务，滥用微任务可能导致问题：
长时间清空微任务队列会阻塞 UI 更新，因为渲染属于宏任务。 递归使用 queueMicrotask 或 Promise 可能导致“微任务风暴”，使页面无响应。 在某些场景下，想让代码“稍后执行但不阻塞渲染”，应使用 setTimeout 而非微任务。
基本上就这些。搞清楚宏任务和微任务的执行顺序，就能更好预测异步代码的行为。
以上就是JavaScript事件循环与微任务队列的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1533763.html
微信扫一扫 
支付宝扫一扫 
