javascript事件循环中微任务优先于宏任务执行。1. 每次事件循环执行一个宏任务；2. 宏任务执行完毕后，立即清空当前所有微任务；3. 微任务全部执行完后，进入下一个宏任务周期。这确保了promise等异步操作能快速响应，提升用户体验。
JavaScript的事件循环机制中，微任务和宏任务的执行顺序是这样的：每次事件循环迭代时，JavaScript引擎会从宏任务队列中取出一个宏任务来执行。当这个宏任务执行完毕后，引擎并不会立即去执行下一个宏任务，而是会暂停一下，转而清空并执行所有当前微任务队列中排队的微任务。只有当微任务队列完全清空后，事件循环才会继续，进入下一个宏任务的执行周期。简单来说，就是“一个宏任务，接着清空所有微任务，再下一个宏任务”。
要深入理解JavaScript事件循环中微任务和宏任务的执行，我们需要把目光投向浏览器或Node.js环境下的运行时。说实话，刚接触这块的时候，我也有点懵，感觉像是在玩一个复杂的俄罗斯方块游戏，各种任务块得按特定规则落下。但一旦搞明白了，你会发现它精妙且极其重要。
事件循环是JavaScript实现非阻塞I/O的核心机制。它不断地检查是否有任务需要执行。当主线程空闲时，它会从任务队列中取出任务执行。这里的“任务”就分成了两种主要类型：宏任务（Macrotasks）和微任务（Microtasks）。
立即学习“Java免费学习笔记（深入）”；
一个典型的事件循环周期是这样的：
这个“一个宏任务，然后所有微任务”的模式，是理解异步行为的关键。它意味着微任务具有更高的优先级，它们能够“插队”在下一个宏任务之前执行，这对于需要立即响应的异步操作（比如Promise链式调用）至关重要。
这问题问得好，因为它直接关系到你的页面会不会“卡顿”或者“假死”。想想看，如果你正在刷微博，突然一个大计算卡住了页面，那体验得多糟心？区分微任务和宏任务，就是为了让浏览器能更智能地分配资源，保证用户界面的响应性。
宏任务通常是那些比较“重”的操作，比如用户交互事件（点击、滚动）、网络请求的回调（虽然Promise处理的是微任务，但原始的I/O操作本身可能触发宏任务）、setTimeout或setInterval的回调等等。这些任务的特点是，它们执行时可能会占用主线程较长时间。如果一个宏任务耗时太久，那么在它执行期间，UI是无法更新的，用户会感觉页面“冻结”了。
而微任务则像是那些“轻量级”的、需要立即处理的后续操作。最典型的就是Promise的回调函数（.then(), .catch(), .finally()）。它们的设计初衷，就是为了在当前宏任务执行完毕后，尽快地、不间断地执行，以保证数据流的连贯性。比如，你发起一个网络请求，得到数据后需要立即进行一些处理和状态更新，这些处理如果放在微任务中，就能确保在下次UI渲染或下一个宏任务开始前完成，从而避免UI显示过期数据或出现闪烁。
这种优先级机制，允许开发者在不阻塞主线程太久的前提下，处理复杂的异步逻辑。如果你有多个依赖于前一个异步操作结果的任务，把它们串成Promise链，它们就会在同一个事件循环的“微任务阶段”高效地执行，而不会被其他宏任务或UI渲染打断，这对于构建流畅的用户体验至关重要。当然，这也不是万能药，如果微任务队列里堆积了太多耗时操作，同样会阻塞UI。所以，关键在于平衡。
了解具体例子能帮助我们更好地在代码中识别和利用它们。这就像是了解不同交通工具的特性，才能规划好出行路线。
宏任务（Macrotasks）的典型代表：
setTimeout() 和 setInterval() 的回调函数：这是最常见的宏任务。它们将回调函数推迟到指定时间后执行，但实际执行时机要看事件循环的调度。即使你设置setTimeout(fn, 0)，它也至少要等到当前所有同步代码和所有微任务执行完毕后，在下一个宏任务周期才可能执行。click、keydown、scroll等事件监听器中的回调函数。当用户触发这些事件时，它们的回调会被放入宏任务队列。requestAnimationFrame()：这个有点特殊，它通常被认为是浏览器渲染周期前的一个特殊队列，但其行为更接近宏任务，因为它会在下一次浏览器重绘之前执行。微任务（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 < 100; i++) {
// const li = document.createElement('li');
// li.textContent = `Item ${i}`;
// list.appendChild(li);
// }
// 优化：将DOM操作放在微任务中，或者先操作内存中的文档碎片，再一次性插入
// 这里使用Promise作为微任务的例子
Promise.resolve().then(() => {
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 < 100; i++) {
const li = document.createElement('li');
li.textContent = `Item ${i} (RAF Optimized)`;
fragment.appendChild(li);
}
requestAnimationFrame(() => {
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事件循环中微任务和宏任务的执行顺序是什么的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
839
