Explain the difference between microtask and macrotask queues

What's really being asked

The interviewer wants to see if you treat the event loop as a priority scheduler rather than a single queue. Seniors should explain that the event loop drives concurrency by interleaving tasks with rendering and microtasks, and they should surface the starvation risk inherent in microtask queues.

The full answer

First, define a macrotask as work scheduled by the browser on the task queue, giving setTimeout or setInterval as concrete examples, and note that user events and script execution also create macrotasks. Second, define a microtask as a callback scheduled to run after the current script or task finishes and the execution stack is empty, giving Promise resolution and queueMicrotask as concrete examples. Third, explain execution order: the event loop picks one macrotask from the task queue, runs it to completion, then drains the entire microtask queue before it considers rendering or fetching the next macrotask. Fourth, mention that because microtasks can enqueue more microtasks, a deep or recursive chain can delay macrotasks and rendering, which is a real performance hazard.

The mistakes people make

A red flag is claiming that setTimeout zero always runs before a Promise.then because it was queued first. Another is describing the event loop as a single queue where everything lines up in arrival order. Some candidates also confuse microtasks with synchronous code or forget that MutationObserver uses microtasks. Finally, omitting the starvation risk suggests you have not debugged real UI jank caused by promise chains.

What usually comes next

The interviewer may ask what happens if a microtask recursively queues another microtask, or how requestAnimationFrame relates to the task and microtask timing. They might also ask you to trace a code snippet mixing setTimeout, Promise, and await, or ask how to yield control back to the browser without waiting a full macrotask tick.

A concrete example

Imagine a button click handler that calls setTimeout zero and then resolves a Promise. The setTimeout callback goes to the macrotask queue, while the Promise.then goes to the microtask queue. After the click handler finishes, the event loop executes the Promise.then first because it drains the microtask queue before moving to the next macrotask. Only after all microtasks finish does the setTimeout callback run. If that Promise.then queues another microtask, that new microtask also runs before the setTimeout.