Which mechanism ensures that a browser-side microtask queue is fully processed before the next rendering update?

Question

Web Development — Hard

Which mechanism ensures that a browser-side microtask queue is fully processed before the next rendering update?

Accepted Answer

In the HTML event loop, the microtask queue (e.g., Promises, MutationObserver) is drained immediately after the current task completes, regardless of whether the browser needs to perform a rendering update. The browser ensures that all microtasks are finished before moving to the rendering phase, which includes style calculation, layout, and paint. This guarantees that state changes triggered by microtasks are reflected in the very next frame.