1.宏任务和微任务的核心执行顺序是：先执行所有同步代码，再清空微任务队列，然后执行一个宏任务，再清空微任务，如此循环；2.微任务（如promise.then、queuemicrotask）优先级高于宏任务（如settimeout、i/o回调），确保异步逻辑的即时性和一致性；3.理解该机制能精准调试异步问题、优化性能（避免卡顿）、控制执行时序、编写可靠异步逻辑，并深入掌握框架底层原理。
宏任务和微任务是JavaScript事件循环（Event Loop）中的两个核心概念，它们决定了异步代码的执行顺序。简单来说，宏任务是较大粒度的任务，例如定时器回调、用户交互事件等，而微任务则是更小、优先级更高的任务，比如Promise的回调。事件循环会先执行完当前所有微任务，然后才去处理下一个宏任务。
理解这个机制，对于我们写出高性能、可预测的异步代码至关重要。
解决方案
要深入理解宏任务和微任务，我们得从JavaScript的单线程特性说起。JS引擎在执行代码时，有一个主线程（Call Stack），它一次只能处理一个任务。但现代Web应用需要处理大量异步操作，比如网络请求、定时器、用户交互等，这些操作如果都阻塞主线程，页面就会卡死。事件循环就是用来解决这个问题的。
当主线程上的同步代码执行完毕后，事件循环就开始工作了。它会不断地检查两个队列：宏任务队列（Macrotask Queue）和微任务队列（Microtask Queue）。
宏任务包括但不限于：
setTimeout
和
setInterval
的回调函数I/O 操作（例如网络请求完成后的回调）UI 渲染事件（如点击、滚动）
requestAnimationFrame
(虽然它与渲染紧密相关，但通常被认为是宏任务周期的一部分)
setImmediate
(Node.js特有)
微任务则包括：
Promise.then()
,
.catch()
,
.finally()
的回调函数
MutationObserver
的回调函数
queueMicrotask
API
process.nextTick
(Node.js特有)
事件循环的执行流程大致是这样的：
执行当前主线程上所有同步代码。当同步代码执行完毕，主线程空闲时，会检查微任务队列。清空微任务队列：它会把所有在微任务队列中的任务一个接一个地取出来执行，直到微任务队列为空。在这个过程中，如果又有新的微任务产生，它们也会被立即加入队列并在当前循环中执行。当微任务队列清空后，事件循环会从宏任务队列中取出一个（注意：通常是一个）任务来执行。这个宏任务执行完毕后，又会回到第2步，再次检查并清空微任务队列。如此循环往复，直到两个队列都为空。
这个“先清空所有微任务，再执行一个宏任务”的机制，是理解JS异步执行顺序的关键。它意味着，即使你有一个
setTimeout(fn, 0)
，它的回调函数也一定会比一个在当前同步代码中创建的
Promise.resolve().then(fn)
的回调晚执行，因为Promise的回调是微任务，会在当前宏任务（即整个同步代码块）结束后立即执行，而
setTimeout
的回调则要等到下一个宏任务周期。
为什么微任务比宏任务优先级更高？
在我看来，微任务被赋予更高优先级，这是设计者深思熟虑的结果，主要为了确保程序状态的即时一致性。你想啊，Promise这种机制，它代表了一个异步操作的最终结果。如果一个Promise链式调用，它的
then
回调不是立即执行，而是要等到下一个宏任务周期，那整个异步流程的确定性和可预测性就会大打折扣。
举个例子，你可能在一个函数里发起了一个网络请求，这个请求返回了一个Promise。你希望在请求成功后立即更新UI或者执行一些依赖于这个结果的后续操作。如果
then
回调被推迟到下一个宏任务，那么在这期间，你的程序状态可能已经发生了变化，导致逻辑错误或者UI闪烁。
微任务的这种高优先级，使得Promise链能够在一个“原子性”的执行单元内完成，即在一个宏任务执行结束后，所有相关的微任务都会被处理掉，确保了当前操作的所有副作用都已完成，才去处理下一个独立的宏任务。这就像是，在一个大任务（宏任务）的间隙，先把你手头所有紧急的小修小补（微任务）都搞定，再开始下一个大活儿。这对于保持程序内部逻辑的连贯性、避免不必要的中间状态非常有用。
常见的宏任务和微任务有哪些？
实际开发中，我们最常打交道的宏任务和微任务主要有这些：
常见的宏任务：
setTimeout
和
setInterval
: 这是最经典的宏任务了。它们的回调函数会被推迟到未来的某个宏任务周期执行。
console.log('开始');setTimeout(() => { console.log('setTimeout 回调'); // 这是宏任务}, 0);Promise.resolve().then(() => { console.log('Promise 微任务'); // 这是微任务});console.log('结束');// 输出顺序：开始 -> 结束 -> Promise 微任务 -> setTimeout 回调
I/O 操作: 比如文件读写、网络请求（XMLHttpRequest、fetch等）的回调。当数据准备好时，相应的回调会被放入宏任务队列。
// 假设这是一个模拟的网络请求function fetchData() { return new Promise(resolve => { // 模拟网络延迟，这是一个宏任务的触发 setTimeout(() => { console.log('网络请求数据已获取'); resolve('一些数据'); }, 10); });}fetchData().then(data => { console.log('处理获取到的数据:', data); // Promise.then是微任务});console.log('请求已发送');// 输出顺序：请求已发送 -> 网络请求数据已获取 -> 处理获取到的数据: 一些数据
UI 渲染事件: 用户的交互，比如点击（
click
）、滚动（
scroll
）、鼠标移动（
mousemove
）等事件的回调函数，它们都是宏任务。
常见的微任务：
Promise.then()
,
.catch()
,
.finally()
: 这是最常见的微任务来源。它们的回调会在当前宏任务执行结束后立即执行。
new Promise(resolve => { console.log('Promise构造函数'); resolve();}).then(() => { console.log('Promise.then');});console.log('同步代码');// 输出顺序：Promise构造函数 -> 同步代码 -> Promise.then
MutationObserver
: 用于监听DOM树变化的API。当DOM发生变化时，它的回调会被放入微任务队列。这对于需要对DOM变化做出即时响应，但又不想阻塞渲染的场景非常有用。
queueMicrotask
: 这是一个相对较新的API，它允许你显式地将一个函数放入微任务队列。当你需要确保某个操作在当前任务结束后立即执行，但又不想引入Promise的开销时，它就很有用了。
console.log('1');queueMicrotask(() => { console.log('2 (microtask)');});console.log('3');// 输出顺序：1 -> 3 -> 2 (microtask)
process.nextTick
(Node.js特有): 在Node.js环境中，
process.nextTick
的回调比Promise的微任务优先级还要高，它会在当前操作的末尾立即执行，甚至在当前宏任务的任何微任务之前。但在浏览器环境中，我们通常不考虑它。
理解宏任务和微任务对前端开发有什么实际意义？
我个人觉得，理解宏任务和微任务，不仅仅是深入JS运行机制的必要一环，更是我们日常前端开发中解决疑难杂症、优化性能、编写健壮代码的“瑞士军刀”。
调试异步代码的利器: 当你的异步代码执行顺序不符合预期时，比如一个变量的值在某个异步操作后没有及时更新，或者UI状态出现了奇怪的闪烁，很可能就是你对宏任务和微任务的执行顺序理解有偏差。明确知道哪些是宏任务，哪些是微任务，以及它们在事件循环中的优先级，能帮助你快速定位问题，预测代码行为。
优化用户体验和性能:
避免UI卡顿: 长时间的同步计算会阻塞主线程，导致页面卡顿。即使是大量微任务的连续执行，也可能导致UI无法及时更新。理解事件循环能让你知道何时UI会重新渲染（通常是在一个宏任务执行完毕，所有微任务清空后），从而合理地拆分任务，避免“长任务”，利用
setTimeout
或
requestAnimationFrame
将耗时操作分解到不同的宏任务周期，给浏览器留出渲染时间。精确控制时序: 有时候你希望某个操作尽可能快地执行，但又不能阻塞当前同步代码。这时，选择微任务（如
Promise.resolve().then()
或
queueMicrotask
）就比宏任务（
setTimeout(fn, 0)
）更合适，因为它能确保在当前宏任务结束后立即执行，而不是等到下一个宏任务周期。
编写更可靠的异步逻辑: 当你处理复杂的异步流程，比如多个Promise的链式调用、同时监听DOM变化和网络请求时，对宏任务和微任务的清晰认知，能帮助你设计出更健壮的逻辑，避免竞态条件（race condition）和不可预测的行为。例如，你可能需要确保某个DOM更新在所有数据处理完成后才发生，那么将DOM更新放在一个微任务中，或者确保它依赖的数据处理也是通过微任务完成，就能保证时序的正确性。
理解框架和库的底层机制: 许多前端框架（如Vue、React的异步更新机制）和库（如Lodash的
debounce
和
throttle
实现）都或多或少地利用了事件循环的原理来优化性能或控制执行时机。当你深入理解这些底层机制时，就能更好地使用它们，甚至在必要时进行定制。
总的来说，这不仅仅是理论知识，更是我们写好JavaScript，尤其是前端JavaScript的基石。当你面对那些“为什么我的
console.log
顺序不对？”或者“为什么我的UI更新没及时？”的问题时，往往就是事件循环在背后默默工作，而你可能忽略了它的节奏。
以上就是什么是宏任务和微任务？它们在事件循环中如何执行？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1517537.html
微信扫一扫 
支付宝扫一扫 
