揭秘 EventLoop 中的宏任务排队机制
2023-11-17 11:16:28
本文旨在探究 EventLoop 中一个鲜为人知的事实：宏任务是否会等到队列清空后才被加入队列尾部。通过深入浅出的讲解和生动的示例，我们将揭开 EventLoop 的神秘面纱，帮助开发者更好地理解其工作原理。
深入剖析 EventLoop
要理解宏任务的排队机制，我们首先需要对 EventLoop 有一个清晰的认识。EventLoop 是 JavaScript 运行时的核心，它是一个事件队列，负责处理和执行来自不同来源的事件（如用户交互、网络请求和计时器）。
EventLoop 遵循一个循环执行的机制，主要包括以下步骤：
- 检查调用栈中是否有同步任务。如果有，则立即执行它们。
- 如果调用栈为空，则检查任务队列中是否有微任务。如果有，则执行它们。
- 如果调用栈和任务队列都为空，则从事件队列中获取下一个事件并将其添加到调用栈中。
- 重复步骤 1-3，直到事件队列为空。
宏任务的排队机制
现在，让我们回到宏任务的排队机制上来。宏任务是那些需要较长时间执行的任务，例如 DOM 操作、网络请求和计时器回调函数。与微任务不同，宏任务不会在调用栈清空后立即执行，而是被添加到事件队列中。
一个常见的误解是，宏任务会在队列清空后才被放入队尾。然而，事实并非如此。宏任务实际上会在当前队列中最后一个微任务之后被加入队列尾部。
举个例子，假设我们有以下代码：
console.log('1');
Promise.resolve().then(() => console.log('2'));
setTimeout(() => console.log('3'), 0);
console.log('4');
当这段代码执行时，以下事件将发生：
- 调用栈执行代码
console.log('1')。 - 一个微任务被创建并添加到任务队列（
Promise.resolve().then(() => console.log('2'))）。 - 调用栈执行代码
console.log('4')。 - 一个宏任务被创建并添加到事件队列（
setTimeout(() => console.log('3'), 0)）。
在这个例子中，宏任务（setTimeout 回调）是在最后一个微任务（Promise 回调）之后被添加到事件队列的。因此，宏任务并不会等到队列清空后才被加入队列尾部。
为何宏任务会立即入队
理解宏任务为何会立即入队至关重要。这一机制确保了宏任务不会被无限期地推迟。如果宏任务必须等到队列清空后才能被加入队列尾部，则可能导致应用程序出现延迟和性能问题。
结论
通过深入探究 EventLoop 的机制，我们了解到宏任务不会等到队列清空后才被放入队尾。相反，宏任务会在当前队列中最后一个微任务之后被加入队列尾部。这种机制确保了宏任务及时执行，避免了应用程序的延迟和性能问题。
