Wat zijn macro- en microtaken?

Macro-taken zijn grote, hoog-niveau fasen van de browserwerkzaamheden, zoals HTML-parsering, DOM-bouw, CSSOM-bouw, stijlberekeningen, het bouwen van de renderboom, layout, schilderen (Paint) en compositie (Composite). Ze vormen de hoofdconveyor van de rendering.

Micro-taken zijn kleinere, meer gedetailleerde acties die worden uitgevoerd nadat de huidige macro-taak is voltooid en voordat de volgende begint. Ze omvatten het afhandelen van promises (Promise), MutationObserver, queueMicrotask.

Het belangrijkste verschil is dat micro-taken altijd onmiddellijk worden uitgevoerd na de huidige macro-taak, terwijl de volgende macro-taak (bijvoorbeeld de volgende render frame of de timergebeurtenis setTimeout) pas wordt uitgevoerd nadat de micro-taak wachtrij leeg is.

Voorbeeld van de volgorde van uitvoering:

// Macro-taak (oorspronkelijke code)
console.log('Begin');

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

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

// Macro-taak (einde van de oorspronkelijke code)
console.log('Einde');

Uitvoer in de console:

Begin
Einde
Promise
Timer

Uitvoeringsvolgorde:

1. De initiële macro-taak (het hoofdscript) wordt uitgevoerd.
2. console.log('Begin').
3. setTimeout plaatst de macro-taak in de wachtrij.
4. Promise.resolve().then() plaatst de micro-taak in de wachtrij.
5. console.log('Einde').
6. De hoofdmacro-taak is voltooid.
7. De micro-taakwachtrij wordt gecontroleerd: Promise.resolve().then() wordt uitgevoerd.
8. console.log('Promise').
9. De micro-taakwachtrij is leeg.
10. De browser verwerkt taken in de event loop, gaat naar de volgende macro-taak.
11. De macro-taak van setTimeout wordt verwerkt.
12. console.log('Timer').
13. De macro-taak is voltooid.

Dit begrip is belangrijk voor het beheren van de volgorde van asynchrone operaties en het begrijpen van hoe de Event Loop werkt.