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

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

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

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

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

// Макрозадача (начальный код)
console.log('Начало');

// Макрозадача (таймер)
setTimeout(() => {
  console.log('Таймер');
}, 0);

// Микрозадача (промис)
Promise.resolve().then(() => {
  console.log('Промис');
});

// Макрозадача (конец начального кода)
console.log('Конец');

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

Начало
Конец
Промис
Таймер

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

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.