What is the precise behavior of the browser’s event loop when a microtask queue contains pending tasks after a macrotask completes?

Question

Web Development — Hard

What is the precise behavior of the browser’s event loop when a microtask queue contains pending tasks after a macrotask completes?

Accepted Answer

The event loop follows a strict priority: after a macrotask (like a timer or event callback) finishes, the engine processes the entire microtask queue (e.g., Promises, MutationObserver) until it is empty. This happens before the browser performs any rendering or moves to the next macrotask. If a microtask adds another microtask, that new task is also executed within the same cycle, potentially leading to infinite loops if not managed correctly. Options B, C, and D misrepresent the synchronous, exhaustive nature of the microtask checkpoint.