How does the JavaScript microtask queue differ from the macrotask queue, and how does this affect the execution order of Promises, queueMicrotask, setTimeout, and MutationObserver?

Imagine you're playing with building blocks. Some jobs are super important and must be done right away, like cleaning up a spill (microtasks). Other jobs can wait a little, like putting toys away after you finish playing (macrotasks). The JavaScript event loop always finishes all important jobs first before moving on to the less important ones.