Comparison
MicrotaskvsMutationObserver
Microtask
the promise callback ran before the timeout you scheduled first, and before the browser painted anything.
A callback queued by a resolved promise, `queueMicrotask` or a mutation observer, which runs after the current task and before the browser gets a chance to render. The entire microtask queue is drained each time, including microtasks queued by microtasks, so a promise chain that keeps resolving can starve rendering indefinitely. That ordering — all microtasks, then render, then the next task — is the actual answer to why promise callbacks beat timers.
Full entry →MutationObserver
you needed to know when someone else's script changed the DOM, so you watched the subtree.
An API reporting DOM changes asynchronously in batches, as microtasks after the current task. It is the tool for reacting to markup you do not control — third-party widgets, injected content, extensions. Observing a large subtree with all options enabled is expensive, and the callback runs before paint, so heavy work in it delays the frame.
Full entry →