Асинхронность — Event Loop

В JavaScript асинхронность принципиальна для обработки запросов параллельно с загрузкой страницы.

Event loop

«Event loop в JavaScript — менеджер асинхронных вызовов.» JavaScript однопоточен; event loop управляет порядком выполнения через стек вызовов, очередь и Web API браузера.

Три компонента

1. Call Stack (стек вызовов) — где выполняется синхронный код (LIFO)
2. Web API — обрабатывает async операции (setTimeout, fetch, события DOM)
3. Queue (очередь) — ждёт, пока стек освободится

Пример

const foo = () => console.log('First')
const bar = () => setTimeout(() => console.log('Second'), 500)
const baz = () => console.log('Third')

bar()
foo()
baz()
// Вывод: "First", "Third", "Second"

Микрозадачи vs макрозадачи

console.log('start')

setTimeout(() => console.log('setTimeout'), 0)  // макрозадача

Promise.resolve().then(() => console.log('promise')) // микрозадача

console.log('end')

// Вывод: start, end, promise, setTimeout

Микрозадачи (Promises) выполняются перед макрозадачами (setTimeout, setInterval).