What is the difference between microtasks and macrotasks?
Answer
The JavaScript event loop processes two queues with different priorities. Macrotask queue (Task Queue) — contains callbacks from: setTimeout, setInterval, I/O events, UI rendering, setImmediate (Node.js), requestAnimationFrame (browser). The event loop processes ONE macrotask per loop iteration. Microtask queue — contains callbacks from: resolved/rejected Promises (.then/.catch/.finally), queueMicrotask(), MutationObserver, async/await continuations. After each macrotask (or after synchronous code), the event loop drains the ENTIRE microtask queue before moving to the next macrotask. This means: Promise callbacks always run before the next setTimeout callback. Example: setTimeout(() => console.log("timeout")); Promise.resolve().then(() => console.log("promise")) — outputs: "promise" then "timeout". Practical impact: Promise chains can "starve" macrotasks if they keep adding microtasks; recursive Promise chains can delay rendering.