Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке мікротаски (microtasks)?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Мікротаски (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');
```

### Покроково:

1. `console.log('1')` -> виконується одразу
**Вивід:** `1`
2. `setTimeout(..., 0)` -> колбек потрапляє в **чергу макротасків** (task queue)
3. `Promise.then(...)` -> колбек потрапляє в **чергу мікротасків**
4. `console.log('4')` -> виконується одразу
**Вивід:** `4`
5. Поточний стек порожній -> виконуються **всі мікротаски** -> `console.log('3')`
6. Тільки після цього виконуються макротаски -> `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** | Стек -> всі мікротаски -> наступна макротаска |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати366 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.