Microtasks vs Macrotasks

1. Introduction

Asynchronous callbacks are scheduled in two separate queues: the Microtask Queue and the Macrotask Queue (commonly called the Callback Queue). The JavaScript engine processes these queues with different priorities, which affects the order in which code executes.

2. Why It Matters

Understanding queue priorities is critical to predicting the execution order of complex asynchronous code (mixing Promises, timers, and mutation observers) and preventing UI rendering blocks.

3. Real-World Analogy

Think of a Post Office Service counter:

• Macrotasks (Standard Mail Delivery): Packages arriving at the loading dock. Each package delivery is a separate, standalone task. The clerk processes one package, then takes a break to check on other duties before processing the next.
• Microtasks (VIP Customers at the Counter): A customer standing directly at the window who keeps adding requests: "Oh, and mail this document, and photocopy this, and stamps please." The clerk must fulfill all of this customer's immediate requests (exhaust the microtask queue) before leaving the counter to process the packages at the loading dock (macrotasks) or clean the lobby (DOM render).

4. The Execution Rules

The Event Loop coordinates the execution of tasks using these priority rules:
1. Execute all synchronous code on the Call Stack first.
2. When the Call Stack is empty, check the Microtask Queue. Execute all microtasks in the queue sequentially until it is completely empty. If a microtask adds another microtask, it is executed immediately in the same cycle.
3. When the Microtask Queue is empty, check if the browser needs to perform a DOM rendering update.
4. Fetch the first task from the Macrotask Queue, push it onto the Call Stack, and execute it.
5. Repeat the loop (go back to Step 2).

5. Task Types

6. Practical Example

This script demonstrates how promise callbacks (microtasks) execute before timers (macrotasks), even if the timer has a delay of 0ms:

7. Common Mistakes

• Starving the Macrotask Queue: Adding microtasks recursively inside a microtask callback creates an infinite loop that keeps the Microtask Queue filled. This starves the event loop, preventing macrotasks (like timers) from running and blocking DOM rendering updates.

8. Quick Quiz

9. Scenario-Based Challenge

10. Debugging Exercise

function updateUi() {
  const el = document.getElementById('title');
  el.textContent = 'Processing...';
// Objective: Let user see 'Processing...' before starting heavy calculations
  queueMicrotask(() => {
    // Heavy synchronous calculation
    const start = Date.now();
    while (Date.now() - start < 1000) {}
    el.textContent = 'Done!';
  });
}

function updateUi() {
  const el = document.getElementById('title');
  el.textContent = 'Processing...';

setTimeout(() => {
    const start = Date.now();
    while (Date.now() - start < 1000) {}
    el.textContent = 'Done!';
  }, 0); // Allows DOM render to complete first
}

11. Interview Questions

12. Production Considerations

• • queueMicrotask for Batching: Use queueMicrotask() when you want to schedule a task to run immediately after the current synchronous block finishes, but before yielding control to browser rendering or timers. This is useful for batching operations to avoid redundant rendering cycles.