Що таке мікротаски (microtasks)?
Мікротаски (microtasks) - це невеликі задачі, які виконуються одразу після поточного коду (поточної макрозадачі), до того, як почнеться наступна макрозадача з черги. Вони утворюють окрему структуру - чергу мікротасків (Microtask Queue).
Ключова ідея
У JavaScript є два рівні задач:
| Тип | Приклади | Коли виконується |
|---|---|---|
| Макротаски (Tasks) | setTimeout, setInterval, події DOM, колбеки fetch | Після очищення стека |
| Мікротаски (Microtasks) | Promise.then, Promise.catch, queueMicrotask, MutationObserver | Одразу після поточної задачі, до наступної макротаски |
Тобто після виконання поточного коду (наприклад, функції), Event Loop спочатку перевіряє чергу мікротасків - якщо в ній є задачі, вони виконуються всі підряд, поки черга не спорожніє.
Приклад
javascript
console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');Покроково:
console.log('1')-> виконується одразу Вивід:1setTimeout(..., 0)-> колбек потрапляє в чергу макротасків (task queue)Promise.then(...)-> колбек потрапляє в чергу мікротасківconsole.log('4')-> виконується одразу Вивід:4- Поточний стек порожній -> виконуються всі мікротаски ->
console.log('3') - Тільки після цього виконуються макротаски ->
console.log('2')
Підсумковий порядок виводу:
javascript
1
4
3
2Що створює мікротаски
| Джерело | Приклад |
|---|---|
| Promise | Promise.resolve().then(...) |
| queueMicrotask() | queueMicrotask(() => { ... }) |
| MutationObserver | Відстеження змін DOM |
Відмінність мікротасків від макротасків
| Властивість | Мікротаски | Макротаски |
|---|---|---|
| Черга | Microtask Queue | Task Queue |
| Приклади | Promise.then, queueMicrotask | setTimeout, fetch, click |
| Пріоритет | Вищий - виконуються раніше | Нижчий |
| Коли виконуються | Після поточного коду, але до наступної події | Після всіх мікротасків |
Обережно з мікротасками
Якщо нескінченно додавати нові мікротаски всередині then, рушій ніколи не дійде до наступної макротаски - вийде "заморожений" Event Loop:
javascript
function loop() {
Promise.resolve().then(loop);
}
loop(); // браузер зависнеПідсумок
| Термін | Опис |
|---|---|
| Microtask | Маленька задача, що виконується після поточного коду і до наступної макротаски |
| Черга мікротасків | Зберігає колбеки Promise.then, queueMicrotask тощо |
| Пріоритет | Вищий, ніж у макротасків |
| Порядок Event Loop | Стек -> всі мікротаски -> наступна макротаска |
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.