Как распределяются по очереди задач Promise?

Это фундаментальный вопрос о том, как JavaScript выполняет асинхронный код. Понимание очередности (task queue vs microtask queue) критично для написания предсказуемого кода.

Event Loop и две очереди

JavaScript движок использует Event Loop для управления выполнением кода. Есть три уровня приоритета: Call Stack (текущий выполняющийся код), Microtask Queue (Promise callbacks, MutationObserver), Macrotask Queue (setTimeout, setInterval, I/O операции).

Порядок выполнения

1. Выполни все в Call Stack
2. Выполни ВСЕ microtasks (до тех пор пока очередь не пуста)
3. Отрендери UI (если нужно)
4. Выполни ОДИН macrotask
5. Повтори шаг 2

Ключевой момент: все microtasks выполняются ПЕРЕД следующим macrotask.

Практическое применение: async/await

async/await это синтаксис для Promise (работает в microtask queue). Promise.then() выполнится ДО setTimeout(0), потому что они в разных очередях.

Ошибка: забыли про очередность

Когда fetch().then() выполнится РАНЬШЕ setTimeout(), потому что они в разных очередях. Нужно понимать эту разницу для правильного написания асинхронного кода.

Performance: почему это важно

Много setTimeout'ов заблокируют UI. Лучше использовать requestAnimationFrame с Promise для оптимального рендера. Понимание очередности позволяет писать эффективный асинхронный код, предсказываемый и производительный.