javascript事件循环中微任务优先于宏任务执行。1. 每次事件循环执行一个宏任务；2. 宏任务执行完毕后，立即清空当前所有微任务；3. 微任务全部执行完后，进入下一个宏任务周期。这确保了promise等异步操作能快速响应，提升用户体验。
JavaScript的事件循环机制中，微任务和宏任务的执行顺序是这样的：每次事件循环迭代时，JavaScript引擎会从宏任务队列中取出一个宏任务来执行。当这个宏任务执行完毕后，引擎并不会立即去执行下一个宏任务，而是会暂停一下，转而清空并执行所有当前微任务队列中排队的微任务。只有当微任务队列完全清空后，事件循环才会继续，进入下一个宏任务的执行周期。简单来说，就是“一个宏任务，接着清空所有微任务，再下一个宏任务”。
解决方案
要深入理解JavaScript事件循环中微任务和宏任务的执行，我们需要把目光投向浏览器或Node.js环境下的运行时。说实话，刚接触这块的时候，我也有点懵，感觉像是在玩一个复杂的俄罗斯方块游戏，各种任务块得按特定规则落下。但一旦搞明白了，你会发现它精妙且极其重要。
事件循环是JavaScript实现非阻塞I/O的核心机制。它不断地检查是否有任务需要执行。当主线程空闲时，它会从任务队列中取出任务执行。这里的“任务”就分成了两种主要类型：宏任务（Macrotasks）和微任务（Microtasks）。
立即学习“Java免费学习笔记（深入）”；
一个典型的事件循环周期是这样的：
执行当前同步代码：当一个脚本开始执行时，它会从头到尾同步运行，这本身可以看作是一个大的宏任务。执行一个宏任务：同步代码执行完毕后，事件循环会从宏任务队列（也叫任务队列或回调队列）中取出一个最老的宏任务来执行。清空微任务队列：在当前宏任务执行完毕后，JavaScript引擎会立即检查微任务队列。此时，所有在当前宏任务执行期间产生的微任务，都会被一个不落地地执行完。渲染（浏览器特有）：如果浏览器判断有必要，会在执行完所有微任务后进行页面渲染，更新UI。进入下一个宏任务周期：完成上述步骤后，事件循环会回到第2步，从宏任务队列中取出下一个宏任务执行，如此循环往复。
这个“一个宏任务，然后所有微任务”的模式，是理解异步行为的关键。它意味着微任务具有更高的优先级，它们能够“插队”在下一个宏任务之前执行，这对于需要立即响应的异步操作（比如Promise链式调用）至关重要。
为什么区分微任务和宏任务对前端性能至关重要？
这问题问得好，因为它直接关系到你的页面会不会“卡顿”或者“假死”。想想看，如果你正在刷微博，突然一个大计算卡住了页面，那体验得多糟心？区分微任务和宏任务，就是为了让浏览器能更智能地分配资源，保证用户界面的响应性。
宏任务通常是那些比较“重”的操作，比如用户交互事件（点击、滚动）、网络请求的回调（虽然Promise处理的是微任务，但原始的I/O操作本身可能触发宏任务）、setTimeout或setInterval的回调等等。这些任务的特点是，它们执行时可能会占用主线程较长时间。如果一个宏任务耗时太久，那么在它执行期间，UI是无法更新的，用户会感觉页面“冻结”了。
而微任务则像是那些“轻量级”的、需要立即处理的后续操作。最典型的就是Promise的回调函数（.then(), .catch(), .finally()）。它们的设计初衷，就是为了在当前宏任务执行完毕后，尽快地、不间断地执行，以保证数据流的连贯性。比如，你发起一个网络请求，得到数据后需要立即进行一些处理和状态更新，这些处理如果放在微任务中，就能确保在下次UI渲染或下一个宏任务开始前完成，从而避免UI显示过期数据或出现闪烁。
这种优先级机制，允许开发者在不阻塞主线程太久的前提下，处理复杂的异步逻辑。如果你有多个依赖于前一个异步操作结果的任务，把它们串成Promise链，它们就会在同一个事件循环的“微任务阶段”高效地执行，而不会被其他宏任务或UI渲染打断，这对于构建流畅的用户体验至关重要。当然，这也不是万能药，如果微任务队列里堆积了太多耗时操作，同样会阻塞UI。所以，关键在于平衡。
常见的微任务和宏任务有哪些具体例子？
了解具体例子能帮助我们更好地在代码中识别和利用它们。这就像是了解不同交通工具的特性，才能规划好出行路线。
宏任务（Macrotasks）的典型代表：
setTimeout() 和 setInterval() 的回调函数：这是最常见的宏任务。它们将回调函数推迟到指定时间后执行，但实际执行时机要看事件循环的调度。即使你设置setTimeout(fn, 0)，它也至少要等到当前所有同步代码和所有微任务执行完毕后，在下一个宏任务周期才可能执行。I/O 操作的回调：例如，文件读写（在Node.js环境中更常见）、网络请求的回调（尽管Fetch API和XMLHttpRequest的成功/失败回调本身是Promise，但其内部的I/O完成通知通常会触发一个宏任务，进而解析Promise）。用户交互事件的回调：比如click、keydown、scroll等事件监听器中的回调函数。当用户触发这些事件时，它们的回调会被放入宏任务队列。requestAnimationFrame()：这个有点特殊，它通常被认为是浏览器渲染周期前的一个特殊队列，但其行为更接近宏任务，因为它会在下一次浏览器重绘之前执行。初始的脚本执行：当浏览器加载并执行你的JavaScript文件时，整个脚本的执行过程可以看作是一个大的宏任务。
微任务（Microtasks）的典型代表：
Promise.prototype.then()、.catch()、.finally() 的回调函数：这是微任务家族的绝对主力。当一个Promise状态变为fulfilled或rejected时，其对应的回调函数就会被放入微任务队列。queueMicrotask()：这是一个专门用于显式创建微任务的API。如果你需要确保一段代码在当前同步代码执行完毕后、但在下一个宏任务开始前执行，并且不希望引入Promise的额外开销，这个API就很有用。MutationObserver 的回调函数：用于监听DOM变化的API。当DOM发生变化时，其回调函数会被放入微任务队列。process.nextTick() (Node.js特有)：在Node.js环境中，这个API比微任务队列中的其他任务优先级更高，会在当前操作结束后立即执行，甚至比Promise的回调还要快。不过，在浏览器环境中，我们主要关注前面几种。
理解这些具体例子，能帮助你预测代码的执行顺序，尤其是在处理复杂的异步逻辑时，避免出现意料之外的结果。
如何在实际开发中利用微任务和宏任务的特性优化代码？
在日常开发中，深入理解微任务和宏任务的执行机制，能让你写出更高效、响应更快的代码，也能更好地调试一些看似“玄学”的异步问题。这就像是掌握了交通信号灯的规律，就能更顺畅地通行。
细粒度控制异步操作的优先级：当你需要在一个操作完成后，立即执行后续逻辑，并且希望这个后续逻辑尽可能快地执行，不被UI渲染或其他耗时操作打断时，优先考虑使用Promise。例如，数据获取后进行数据转换、状态更新等，这些都适合放在Promise的.then()中。这能保证你的数据处理和UI更新逻辑紧密相连，减少视觉上的延迟。
function fetchDataAndProcess() { fetch('/api/data') .then(response => response.json()) .then(data => { // 这是微任务：数据处理和状态更新 console.log('数据已获取并处理:', data); // 假设这里需要更新Vue/React组件的状态 // this.setState({ items: data.items }); // 这里的状态更新通常会在微任务中完成，确保下次渲染前数据是最新的 }) .catch(error => { console.error('获取数据失败:', error); }); console.log('fetch请求已发送，但数据处理是异步的');}fetchDataAndProcess();console.log('同步代码执行完毕');// 输出顺序可能是：// fetch请求已发送，但数据处理是异步的// 同步代码执行完毕// 数据已获取并处理: [...] (在同步代码和所有微任务之后，下一个宏任务之前)
避免长时间阻塞主线程，保持UI响应：如果你的代码中有一个计算量很大的同步任务，或者需要进行大量DOM操作，直接执行可能会导致页面卡死。这时，你可以利用setTimeout(fn, 0)或requestAnimationFrame将任务拆分成小块，分散到不同的宏任务周期中执行，让浏览器有机会在每次小块任务之间进行UI渲染。
// 假设一个非常耗时的计算function heavyComputation() { let result = 0; for (let i = 0; i < 1000000000; i++) { result += i; } console.log('耗时计算完成:', result);}// 这样会阻塞UI// heavyComputation();// 优化：使用setTimeout(0)将其推迟到下一个宏任务，让UI有机会渲染function optimizedHeavyComputation() { let i = 0; const total = 1000000000; let result = 0; function processChunk() { const chunkSize = 1000000; // 每次处理100万次循环 let start = i; let end = Math.min(i + chunkSize, total); for (let j = start; j < end; j++) { result += j; } i = end; if (i < total) { console.log(`处理到 ${i}/${total}`); setTimeout(processChunk, 0); // 将剩余任务推迟到下一个宏任务 } else { console.log('优化后的耗时计算完成:', result); } } setTimeout(processChunk, 0); // 启动第一个块}console.log('开始执行');// heavyComputation(); // 体验差optimizedHeavyComputation(); // 体验好，UI不会卡死console.log('同步代码继续执行');
批量处理DOM更新：如果你需要对DOM进行多次修改，例如在一个循环中添加多个元素，每次修改都可能触发浏览器重新计算样式和布局（reflow/repaint），这非常耗性能。你可以将这些DOM操作放在一个微任务或一个requestAnimationFrame中，这样浏览器就有机会将多次修改合并成一次渲染。
const list = document.getElementById('myList');// 糟糕的实践：每次循环都可能触发重绘// for (let i = 0; i { const fragment = document.createDocumentFragment(); for (let i = 0; i < 100; i++) { const li = document.createElement('li'); li.textContent = `Item ${i} (Optimized)`; fragment.appendChild(li); } list.appendChild(fragment); // 一次性插入DOM console.log('DOM更新完成 (微任务中)');});console.log('脚本继续执行');
或者使用requestAnimationFrame来确保在浏览器下一次绘制前完成所有DOM更新：
function updateListWithRAF() { const fragment = document.createDocumentFragment(); for (let i = 0; i { list.appendChild(fragment); console.log('DOM更新完成 (requestAnimationFrame)'); });}// updateListWithRAF();
理解async/await的执行流：async/await是基于Promise的语法糖，理解了微任务和宏任务，就能更好地预测async/await代码的行为。await关键字会暂停async函数的执行，并将剩余部分作为微任务推入队列，等待被await的Promise解决。
async function asyncExample() { console.log('1. async函数开始'); await Promise.resolve('Hello'); // 这里的Promise.resolve()会立即解决 console.log('3. Promise解决后的微任务'); // 这会在当前宏任务执行完毕后，所有微任务中执行 await new Promise(resolve => setTimeout(() => { console.log('4. setTimeout内部'); resolve('World'); }, 0)); // setTimeout是宏任务，所以这里的await会等待下一个宏任务周期 console.log('5. 第二个await后的宏任务');}console.log('0. 同步代码开始');asyncExample();console.log('2. 同步代码结束');// 预期的输出顺序：// 0. 同步代码开始// 1. async函数开始// 2. 同步代码结束// 3. Promise解决后的微任务// 4. setTimeout内部// 5. 第二个await后的宏任务
通过这些实践，你会发现对事件循环的理解不再是纸上谈兵，而是能实实在在提升代码质量和用户体验的利器。它要求你对异步代码的执行时机有更精准的把握，从而写出更健壮、更高效的前端应用。
以上就是JavaScript事件循环中微任务和宏任务的执行顺序是什么的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1511698.html
微信扫一扫 
支付宝扫一扫 
