Event Loop从任务队列取任务的疑问：一轮取一个还是全部？

首先明确结论：Jake Archibald的说法是准确的——事件循环的每一轮（tick）只会从宏任务队列中取出并执行一个任务，执行完成后会先处理完所有微任务，再进入下一轮循环。

为什么MDN的表述会让人产生误解？ #

你看到的MDN那段话存在表述歧义，容易被误解为“一轮执行队列中所有已存在的任务”，但结合HTML规范和实际代码运行结果来看，这种理解是错误的。MDN那段话的本意应该是：在事件循环新的一轮开始时，队列中已存在的任务会被按顺序安排到后续的轮次中执行，但每一轮仍然只处理一个宏任务。

实际代码验证 #

我们可以通过一段简单的代码验证：

console.log('开始');
setTimeout(() => console.log('宏任务1'), 0);
setTimeout(() => console.log('宏任务2'), 0);
Promise.resolve().then(() => console.log('微任务'));
console.log('结束');

运行结果为：

开始
结束
微任务
宏任务1
宏任务2

可以看到，两个setTimeout的回调（宏任务）是分两轮执行的，每轮执行一个，且每次执行完宏任务后都会先处理微任务队列。

依据HTML规范 #

根据HTML官方规范，事件循环的处理流程核心步骤为：

1. 选择一个待处理的宏任务队列
2. 从该队列中取出第一个任务并执行
3. 执行完该任务后，清空所有微任务队列
4. 进行渲染更新等操作
5. 进入下一轮事件循环

这也明确了每一轮只会处理一个宏任务。

内容的提问来源于stack exchange，提问作者hh54188