Что такое макро- и микрозадачи?

Макрозадачи — это крупные, высокоуровневые этапы работы браузера, такие как парсинг HTML, построение DOM, построение CSSOM, расчёт стилей, построение дерева рендеринга, компоновка (Layout), покраска (Paint) и композиция (Composite). Они формируют основной конвейер рендеринга.

Микрозадачи — это более мелкие, детализированные действия, которые выполняются после завершения текущей макрозадачи и до начала следующей. К ним относятся обработка промисов (Promise), MutationObserver, queueMicrotask.

Ключевое различие в том, что микрозадачи всегда выполняются сразу после текущей макрозадачи, в то время как следующая макрозадача (например, следующий кадр рендеринга или обработка события таймера setTimeout) выполняется только после того, как очередь микрозадач будет пуста.

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

javascript

Вывод в консоль:

plaintext

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

1. Выполняется начальная макрозадача (основной скрипт).
2. console.log('Начало').
3. setTimeout ставит макрозадачу в очередь.
4. Promise.resolve().then() ставит микрозадачу в очередь.
5. console.log('Конец').
6. Основная макрозадача завершена.
7. Проверяется очередь микрозадач: выполняется Promise.resolve().then().
8. console.log('Промис').
9. Очередь микрозадач пуста.
10. Браузер обрабатывает задачи в цикле событий, переходит к следующей макрозадаче.
11. Обрабатывается макрозадача из setTimeout.
12. console.log('Таймер').
13. Макрозадача завершена.

Это понимание важно для управления порядком выполнения асинхронных операций и понимания работыEvent Loop.