Как задачи проходят путь до вызова в Event Loop

Вот как задачи попадают в Event Loop и выполняются:

1. Синхронный код выполняется сразу, блокируя основной поток.

2. Асинхронные операции (setTimeout, fetch и т.д.) передаются Web API браузера, который их обрабатывает.

3. После завершения асинхронной операции callback помещается в очередь задач (Task Queue для макрозадач или Microtask Queue для микрозадач).

4. Event Loop постоянно проверяет:

   • Завершился ли основной поток
   • Есть ли задачи в Microtask Queue (промисы, MutationObserver)
   • Есть ли задачи в Task Queue (setTimeout, события)

5. Сначала выполняются все микрозадачи, затем одна макрозадача, затем снова микрозадачи и т.д.

Пример:

console.log('Start'); // Синхронно

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

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

console.log('End'); // Синхронно

Вывод:

Start
End
Promise
Timeout