事件循环中的“高优先级”任务是什么？-js教程-PHP中文网

微任务（如promise回调）被称为“高优先级”是因为在每个事件循环周期中，它们会在同步代码执行完后被集中、优先执行，而宏任务（如settimeout）需等微任务队列清空后才执行；2. 这种机制确保了异步操作的状态一致性与执行时机的确定性，避免被宏任务打断，提升代码可预测性；3. 实际开发中应根据需求选择：用微任务（promise.then、queuemicrotask）实现紧耦合的异步逻辑，用宏任务（settimeout）让出主线程以优化渲染，用requestanimationframe同步动画，从而写出高效、流畅的异步代码。

事件循环中的“高优先级”任务是什么？

在JavaScript的事件循环机制中，我们常说的“高优先级”任务，通常指的是微任务（Microtasks）。它们之所以被称为“高优先级”，并不是因为系统给了它们特殊的CPU调度权重，而是在一个事件循环的迭代周期内，它们会比宏任务（Macrotasks）更早、更集中地被执行。简单来说，当主线程的同步代码执行完毕后，事件循环会优先清空所有待处理的微任务队列，然后才会从宏任务队列中取出一个任务来执行。

解决方案

要深入理解“高优先级”任务，我们得先从事件循环的基础说起。JavaScript是单线程的，这意味着它一次只能做一件事。但为了处理异步操作，比如网络请求、用户交互、定时器等，浏览器（或Node.js环境）引入了事件循环。

事件循环的核心机制是这样的：

执行栈（Call Stack）：所有同步代码都在这里执行。
Web APIs / Node.js APIs：像setTimeout、fetch、DOM事件监听器等异步操作，在执行栈中被调用后，会把它们的回调函数注册到相应的API中，等待条件满足。
任务队列（Task Queue / Macrotask Queue）：当Web API中的异步操作完成，其回调函数会被放入这个队列等待执行。常见的宏任务包括：setTimeout、setInterval的回调、I/O操作、UI渲染事件、setImmediate（Node.js）。
微任务队列（Microtask Queue）：专门用来存放微任务的回调。常见的微任务包括：Promise.then()、Promise.catch()、Promise.finally()的回调、MutationObserver的回调、queueMicrotask()。

这里的“高优先级”就体现在执行顺序上：当执行栈清空后（也就是当前同步代码都跑完了），事件循环并不会立刻去宏任务队列里取下一个任务。它会先检查微任务队列。如果微任务队列里有任务，它会一次性地、不间断地把所有微任务都执行完，直到微任务队列为空。只有当微任务队列彻底清空后，事件循环才会从宏任务队列中取出一个任务来执行。这个宏任务执行完后，又会重复这个循环：清空微任务队列，再取下一个宏任务。

这种机制确保了某些需要“立即”执行但又不能阻塞主线程的操作，能够在一个相对确定的时间点被处理，且不会被其他宏任务打断。

为什么需要区分“高优先级”任务？它们解决了什么问题？

这问题问得挺好，我个人觉得，区分“高优先级”任务，主要是为了解决异步操作中状态一致性和执行时机确定性的问题。在我看来，这就像是给某些异步操作开辟了一个“快速通道”，让它们能在当前代码块执行完毕后，立即进行后续处理，而不用等到下一轮的UI渲染或者其他不相关的宏任务。

你想想看，如果你正在修改DOM，或者更新某个关键的应用状态，你可能希望这个修改完成后，相关的后续逻辑（比如一个基于Promise的动画链条，或者一个数据校验）能立刻执行，而不是被一个可能耗时较长的setTimeout或者一次浏览器渲染给打断。微任务就提供了这种能力：它们保证了在当前宏任务（或者说当前脚本执行）结束、浏览器有机会进行下一次渲染之前，所有相关的微任务都会被处理掉。这对于构建响应式、数据流可预测的应用至关重要。

举个例子，Promise就是微任务的典型代表。当你resolve一个Promise时，它的.then()回调并不会立即执行，也不会被放到宏任务队列里等很久。它会被推入微任务队列，然后在当前同步代码执行完后，立刻被执行。这样，Promise链条就能保持一种近乎同步的逻辑流，但又不会阻塞主线程，这对于管理复杂的异步流程来说，简直是福音。它让异步代码在行为上更接近我们直觉中的同步代码，减少了因执行时机不确定性带来的bug。

微任务（Microtasks）和宏任务（Macrotasks）在事件循环中的具体执行顺序是怎样的？

这部分的执行顺序，其实是理解事件循环的关键。我来试着用一个更“人类”的流程来描述它，而不是那种教科书式的死板定义。

想象一下，你的JavaScript代码就像一个忙碌的厨师（主线程），正在按照菜谱（执行栈）一步步做菜。

AssemblyAI

转录和理解语音的AI模型

查看详情

同步菜谱执行： 厨师首先会把当前菜谱上所有能立即做的菜（同步代码）都做完。他会一直忙活，直到菜谱上的步骤都完成了。
小零食时间（微任务）： 菜谱做完了，厨师会环顾四周，看看有没有一些“小零食”（微任务，比如Promise的后续步骤，或者一些需要立即处理的内部通知）。这些小零食必须全部吃完，才能进行下一步。他会一口气吃完所有小零食，不会停下来。
大任务队列（宏任务）： 零食吃完了，厨师会走到冰箱前，看看有没有人给他留了“大任务”（宏任务，比如一个定时器到期了，或者一个网络请求回来了，或者用户点击了什么）。注意，他只会从冰箱里拿一个大任务出来做。
执行大任务： 厨师开始做这个大任务。在做这个大任务的过程中，如果又产生了新的小零食（微任务），这些小零食会再次被放到小零食篮子里。
循环往复： 当这个大任务做完后，厨师会再次回到第2步：他会再次检查小零食篮子，把所有新产生的小零食全部吃掉。然后，如果小零食篮子空了，他才会回到第3步，从冰箱里再拿下一个大任务来做。

这个过程会一直循环下去，直到所有队列都为空。

一个简单的代码示例：

console.log('开始'); // 同步任务 1

setTimeout(() => {
    console.log('宏任务 1'); // 宏任务 1
    Promise.resolve().then(() => {
        console.log('宏任务 1 内部的微任务'); // 微任务 3
    });
}, 0);

Promise.resolve().then(() => {
    console.log('微任务 1'); // 微任务 1
});

Promise.resolve().then(() => {
    console.log('微任务 2'); // 微任务 2
});

setTimeout(() => {
    console.log('宏任务 2'); // 宏任务 2
}, 0);

console.log('结束'); // 同步任务 2

登录后复制

实际输出会是：

开始
结束
微任务 1
微任务 2
宏任务 1
宏任务 1 内部的微任务
宏任务 2

登录后复制

你看，'开始'和'结束'作为同步代码最先执行。然后，尽管setTimeout的回调函数被安排了，但Promise的微任务'微任务 1'和'微任务 2'却在第一个宏任务'宏任务 1'之前执行了。更妙的是，在'宏任务 1'执行过程中产生的微任务'宏任务 1 内部的微任务'，会立即在'宏任务 1'之后、下一个宏任务'宏任务 2'之前执行。这就是“高优先级”的魅力所在。

在实际开发中，理解“高优先级”任务对我们有什么指导意义？

理解“高优先级”任务，尤其是微任务和宏任务的执行机制，对于写出健壮、可预测且性能良好的异步代码至关重要。这不仅仅是面试题，更是你排查诡异bug、优化用户体验的利器。

调试异步行为： 当你的异步代码表现不如预期时，比如一个Promise的回调没有及时执行，或者UI更新卡顿，首先要怀疑的就是事件循环的机制。搞清楚哪个是微任务，哪个是宏任务，它们的相对优先级，能帮你迅速定位问题。我遇到过不少开发者，把setTimeout(fn, 0)和Promise.resolve().then(fn)混为一谈，觉得都是“立即执行”，结果发现行为大相径庭，就是因为没搞懂微任务和宏任务的区别。前者是放到下一个宏任务周期，后者是放到当前宏任务周期结束后的微任务队列。
优化用户体验： 如果你需要在用户交互后立即进行一些数据处理，并且希望这些处理能赶在下一次UI渲染之前完成，那么微任务是你的首选。例如，当你点击一个按钮，需要立即更新数据并进行一些DOM操作，但又不希望用户看到UI闪烁或者延迟，那么将这些操作放在Promise的.then()里，或者使用queueMicrotask，通常能提供更流畅的体验。但要注意，如果微任务内部的计算量太大，同样会阻塞主线程，因为它也是在主线程上执行的。所以，“高优先级”不等于“不阻塞”。
选择正确的异步API：
- Promise.then() / queueMicrotask()： 当你需要一个异步操作，但又希望它尽可能快地、在当前执行周期内完成，并且不被其他宏任务（比如UI渲染）打断时，选择微任务。这非常适合于需要紧密耦合的后续逻辑，或者在一次数据更新后需要立即进行的副作用处理。
- setTimeout(..., 0)： 当你需要将一个任务推迟到下一个事件循环周期，允许浏览器有机会进行渲染、处理用户输入或其他宏任务时，使用它。这对于“让出主线程”非常有用，可以避免长时间阻塞UI，比如处理大量数据或者分批次执行任务时。
- requestAnimationFrame()： 如果你的任务是关于动画或者需要和浏览器渲染帧同步的，那么这个API才是你的最佳选择。它会在浏览器下一次重绘之前执行，保证动画的流畅性。