Understanding the Event Loop: Microtasks and Macrotasks

The event loop in JavaScript is a pivotal mechanism that orchestrates the execution sequence of both synchronous and asynchronous tasks. It plays a crucial role in determining when microtasks and macrotasks are executed, ensuring a balanced and efficient execution flow. MDN’s guide to using microtasks explains the queue order.

Delving into Microtasks

Microtasks are high-priority tasks that the event loop prioritizes for immediate execution after the current execution context completes, but before moving on to any macrotasks. Common examples of microtasks include Promise resolutions, MutationObserver callbacks, and, in the Node.js environment, process.nextTick (which runs in its own queue, even before promise callbacks). The event loop processes all queued microtasks before moving on, including microtasks queued by other microtasks, guaranteeing their prompt execution and resolution.

// Example of a microtask with Promise
Promise.resolve().then(() => console.log('Microtask executed'));

Navigating Macrotasks

Macrotasks encompass a broader range of tasks, including, but not limited to, setTimeout and setInterval callbacks, I/O callbacks, and user-event callbacks. On each turn, the event loop runs one macrotask, then drains the entire microtask queue, and then the browser may render before the next macrotask. This scheduling... premium content.