Senior LevelHTML & Semantic Web
How does the browser event loop balance microtasks, macrotasks, and rendering pipeline updates?
❓ Interview Prompt: Explain Browser Event Loop pipeline: Microtask Queue (Promises), Task Queue (Macrotasks - setTimeout), requestAnimationFrame, and Render Steps.
The Browser Event Loop processes tasks in strict order:
1
Task Execution: Executes ONE Macrotask (e.g. event callback, setTimeout).
2
Microtask Checkpoint: Flushes the ENTIRE Microtask Queue (Promise callbacks, 'queueMicrotask', MutationObserver) until empty!
3
Render Pipeline: Executes 'requestAnimationFrame' callbacks, recalculates style/layout, and paints screen visual frame (typically 60Hz / 120Hz).
Code Implementation Example
javascript
setTimeout(() => console.log('1. Macrotask'), 0);
Promise.resolve().then(() => console.log('2. Microtask'));
requestAnimationFrame(() => console.log('3. Render Frame'));
// Output order: 2. Microtask -> 3. Render Frame -> 1. Macrotask💡Demonstrating execution order between Microtasks, requestAnimationFrame, and Macrotasks.
🎯 Interview Key Takeaway
Microtasks drain completely before the rendering pipeline runs; Macrotasks execute one at a time between render steps.
#Event Loop#Microtasks#Rendering Pipeline#Senior
Back to all HTML & Semantic Web Questions→