Как работает Event Loop в браузере

Event Loop — это механизм, который управляет выполнением асинхронного кода в JavaScript. Он работает в одном потоке, но использует очередь задач для обработки событий, колбэков и других операций.

Основные компоненты:

1. Call Stack — выполняет синхронный код.
2. Web APIs — обрабатывает асинхронные операции (setTimeout, fetch и т.д.).
3. Callback Queue (Task Queue) — хранит колбэки из Web API.
4. Microtask Queue — для промисов и MutationObserver (выполняется перед Task Queue).

Пример:

console.log('Start');

setTimeout(() => console.log('Timeout'), 0);

Promise.resolve().then(() => console.log('Promise'));

console.log('End');

Вывод:

Start
End
Promise
Timeout

Порядок работы:

1. Синхронный код выполняется сразу.
2. Микрозадачи (промисы) выполняются после синхронного кода.
3. Макрозадачи (setTimeout) выполняются после микрозадач.