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

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

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

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

Контент

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

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

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

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

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

## Коротко

**Мікротаски (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. `1` і `4` → виконуються синхронно (у стеку).
2. `Promise.then(...)` → потрапляє в **чергу мікротасок**.
3. `setTimeout(...)` → потрапляє в **чергу макротасок**.
4. Після очищення стека виконуються **всі мікротаски** → виводить `3`.
5. Потім виконується **перша макротаска** → виводить `2`.

---

## Важлива деталь

Після кожної **макротаски** Event Loop:

1. Виконує **всі мікротаски** (поки черга не порожня),
2. Потім бере **наступну макротаску**,
3. Повторює цикл.

---

## Візуально

```javascript
┌─────────────────────────────────────────────────────┐
│  Виклик функцій (Call Stack)                         │
│─────────────────────────────────────────────────────│
│  Мікротаски (Microtask Queue)                        │ ← виконуються одразу після стека
│─────────────────────────────────────────────────────│
│  Макротаски (Task Queue)                             │ ← виконуються після мікротасок
└─────────────────────────────────────────────────────┘
```

---

## Підсумок

| Що | Коли | Приклад |
|---|---|---|
| **Мікротаска** | Після поточного коду, до макротасок | `Promise.then`, `queueMicrotask` |
| **Макротаска** | Після всіх мікротасок | `setTimeout`, `setInterval`, `fetch` |
| **Event Loop** | Слідкує, щоб стек був порожній → мікротаски → макротаска → повтор | - |

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

Для рев’юера

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

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