Какви са макро и микро задачи?

Макро задачите са големи, високопрофилни етапи от работата на браузъра, като парсване на 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.