Jak funguje událostní smyčka (event loop) v web-API…

JavaScript událostní smyčka (v kontextu webového prohlížeče) je mechanismus, který umožňuje provádět asynchronní operace bez blokování hlavního vlákna. Skládá se z několika komponent:

Hromada (Heap): Oblast paměti, kde jsou uloženy objekty.
Volací zásobník (Call Stack): Datová struktura LIFO, sledující provádění synchronních funkcí.
Webové API (Web APIs): Poskytováno prohlížečem (DOM, AJAX, setTimeout, setInterval, Event Listeners atd.). Nejsou součástí JavaScriptového enginu.
Fronta zpětných volání (Callback Queue) / Fronta úloh (Task Queue): Fronta zpráv pro provádění asynchronních úloh.
Fronta mikroúloh (Microtask Queue): Prioritní fronta pro mikroúlohy (Promise.then(), async/await, queueMicrotask). Provádí se před frontou úloh.
Událostní smyčka (Event Loop): Nepřetržitě kontroluje volací zásobník a frontu. Pokud je zásobník prázdný, přesune první obslužnou rutinu z fronty mikroúloh (je-li) na zásobník. Po vyprázdnění fronty mikroúloh přesune první obslužnou rutinu z fronty úloh na zásobník.

Proces vypadá takto:

Synchronní kód se provádí a funkce se umisťují na volací zásobník.
Když se objeví asynchronní operace (například setTimeout), předá se odpovídajícímu Web API. Synchronní kód pokračuje.
Web API provádí operaci na pozadí.
Po dokončení asynchronní operace je obsluha (callback) této operace umístěna do fronty úloh (pro běžné asynchronní operace) nebo do fronty mikroúloh (pro promise).
Událostní smyčka neustále kontroluje volací zásobník. Pokud je prázdný:
- Kontroluje frontu mikroúloh. Pokud jsou obslužné rutiny, přesune je na zásobník pro provedení, dokud fronta mikroúloh není prázdná.
- Poté kontroluje frontu úloh. Pokud jsou obslužné rutiny, přesune první z nich na zásobník pro provedení.
Tento proces se opakuje, umožňující provádět asynchronní operace bez blokování hlavního vlákna.

Příklad s setTimeout:

// Tento kód se provádí na volacím zásobníku
console.log('Start');

// setTimeout - Web API. Callback je umístěn do fronty úloh po 0ms.
// Skutečné provedení může být zpožděno událostní smyčkou.
setTimeout(() => {
  console.log('Timeout');
}, 0);

// Tento kód se provádí na volacím zásobníku po setTimeout
console.log('End');

// Výstup:
// Start
// End
// Timeout

Příklad s promise:

// provádí se na volacím zásobníku
console.log('A');

// promise. then() callback je umístěn do fronty mikroúloh
Promise.resolve().then(() => {
  console.log('B');
});

// provádí se na volacím zásobníku
console.log('C');

// Výstup:
// A
// C
// B

Pořadí provádění: synchronní kód ('A', 'C'), poté se vyprázdní fronta mikroúloh ('B'), následně fronta úloh.

Jak funguje událostní smyčka (event loop) v web-API?