What are macro- and micro-tasks?

Macrotasks are large, high-level stages of browser operation, such as parsing HTML, building the DOM, constructing the CSSOM, calculating styles, building the rendering tree, layout, painting, and compositing. They form the main rendering pipeline.

Microtasks are smaller, more detailed actions that are executed after the current macrotask completes and before the next one begins. These include handling promises (Promise), MutationObserver, queueMicrotask.

The key difference is that microtasks are always executed immediately after the current macrotask, while the next macrotask (for example, the next rendering frame or handling a setTimeout timer event) is only executed after the microtask queue is empty.

Example execution order:

// Macrotask (initial code)
console.log('Start');

// Macrotask (timer)
setTimeout(() => {
  console.log('Timer');
}, 0);

// Microtask (promise)
Promise.resolve().then(() => {
  console.log('Promise');
});

// Macrotask (end of initial code)
console.log('End');

Console output:

Start
End
Promise
Timer

Execution order:

1. The initial macrotask (main script) runs.
2. console.log('Start').
3. setTimeout schedules a macrotask.
4. Promise.resolve().then() schedules a microtask.
5. console.log('End').
6. The main macrotask finishes.
7. Microtask queue is checked: Promise.resolve().then() executes.
8. console.log('Promise').
9. Microtask queue is empty.
10. Browser processes tasks in the event loop, moving to the next macrotask.
11. The setTimeout macrotask executes.
12. console.log('Timer').
13. The macrotask completes.

This understanding is important for managing the order of asynchronous operations and understanding how the Event Loop works.