Мікро vs Макро таски
Коротко
Мікротаски (microtasks) і макротаски (macrotasks) - це різні "черги завдань", які обробляються в різний час усередині Event Loop.
- Макротаски - це "великі" події: таймери, мережеві запити, події DOM.
- Мікротаски - це "миттєві" завдання, які виконуються одразу після поточного коду, але до наступної макротаски.
Порівняльна таблиця
| Критерій | Макротаски (Task Queue) | Мікротаски (Microtask Queue) |
|---|---|---|
| Коли виконуються | Після очищення стека і всіх мікротасок | Одразу після поточного коду (перед макротаскою) |
| Черга | Task Queue | Microtask Queue |
| Приклади | setTimeout, setInterval, setImmediate, обробники подій, fetch, XHR | Promise.then, Promise.catch, queueMicrotask, MutationObserver |
| Пріоритет | нижчий | вищий |
| Кількість, що виконується за раз | Одна за ітерацію Event Loop | Усі мікротаски підряд, поки черга не порожня |
| Джерело | Зовнішні API браузера (Web API) | Вбудовані мікрозадачі рушія JS |
| Типова мета | Відкладене виконання, асинхронні події | Реакції на завершення промісів, дрібні ланцюжки дій |
Приклад, що показує різницю
javascript
console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');Порядок виводу:
javascript
1
4
3
2Пояснення:
1і4→ виконуються синхронно (у стеку).Promise.then(...)→ потрапляє в чергу мікротасок.setTimeout(...)→ потрапляє в чергу макротасок.- Після очищення стека виконуються всі мікротаски → виводить
3. - Потім виконується перша макротаска → виводить
2.
Важлива деталь
Після кожної макротаски Event Loop:
- Виконує всі мікротаски (поки черга не порожня),
- Потім бере наступну макротаску,
- Повторює цикл.
Візуально
javascript
┌─────────────────────────────────────────────────────┐
│ Виклик функцій (Call Stack) │
│─────────────────────────────────────────────────────│
│ Мікротаски (Microtask Queue) │ ← виконуються одразу після стека
│─────────────────────────────────────────────────────│
│ Макротаски (Task Queue) │ ← виконуються після мікротасок
└─────────────────────────────────────────────────────┘Підсумок
| Що | Коли | Приклад |
|---|---|---|
| Мікротаска | Після поточного коду, до макротасок | Promise.then, queueMicrotask |
| Макротаска | Після всіх мікротасок | setTimeout, setInterval, fetch |
| Event Loop | Слідкує, щоб стек був порожній → мікротаски → макротаска → повтор | - |
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.