3333

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

Как работает Event Loop

JavaScript имеет однопоточную модель выполнения, но использует Event Loop для обработки асинхронных операций без блокировки основного потока. Event Loop управляет двумя основными очередями: очередью задач (macrotask queue) и очередью микрозадач (microtask queue). К макрозадачам относятся, например, setTimeout, setInterval, I/O-операции. К микрозадачам — обработчики промисов (.then, .catch, .finally) и queueMicrotask.

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

Основное правило: после выполнения каждой макрозадачи Event Loop сначала полностью очищает всю очередь микрозадач, прежде чем взять следующую макрозадачу. Это обеспечивает высокий приоритет для промисов.

Разбор примера кода

Рассмотрим исходный код:

console.log('1');

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

console.log('3');

1. Выполняется синхронный код: console.log('1') выводит '1'.
2. Создаётся промис с помощью Promise.resolve(). Метод .then(() => console.log('2')) регистрирует колбэк в очереди микрозадач, но не выполняет его сразу.
3. Выполняется следующий синхронный код: console.log('3') выводит '3'. На этом текущее макрозадание (изначальный скрипт) завершается.
4. Event Loop переходит к фазе обработки микрозадач. Очередь микрозадач содержит колбэк из промиса. Он выполняется, и console.log('2') выводит '2'.

Таким образом, порядок вывода: '1', '3', '2'.

Практическое применение

Понимание этого порядка критично для:

• Отладки сложных асинхронных цепочек.
• Написания корректных тестов, которые зависят от порядка выполнения.
• Оптимизации производительности, чтобы не блокировать Event Loop длительными синхронными операциями между микрозадачами.
• Реализации паттернов, где нужно гарантировать выполнение кода после всех текущих промисов (например, с помощью queueMicrotask).

Вывод: Этот пример наглядно показывает приоритет микрозадач (обработчиков промисов) над макрозадачами. Знание этого механизма помогает писать предсказуемый асинхронный код и является фундаментальным для любого JavaScript-разработчика.