Suggest an edit

Improve this article

Refine the answer for “Micro vs Macro tasks”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## In short

**Microtasks** and **macrotasks** are different "task queues" that are processed **at different times** inside the **Event Loop**.

- **Macrotasks** are "large" events: timers, network requests, DOM events.
- **Microtasks** are "instant" tasks that run **right after the current code**, but **before the next macrotask**.

---

## Comparison table

| Criterion | **Macrotasks (Task Queue)** | **Microtasks (Microtask Queue)** |
|---|---|---|
| **When they run** | After the stack and all microtasks are cleared | Right after the current code (before a macrotask) |
| **Queue** | `Task Queue` | `Microtask Queue` |
| **Examples** | `setTimeout`, `setInterval`, `setImmediate`, event handlers, `fetch`, `XHR` | `Promise.then`, `Promise.catch`, `queueMicrotask`, `MutationObserver` |
| **Priority** | lower | higher |
| **Number run at once** | One per Event Loop iteration | All microtasks in a row, until the queue is empty |
| **Source** | External browser APIs (Web API) | Built-in microtasks of the JS engine |
| **Typical purpose** | Deferred execution, asynchronous events | Reactions to promise settlement, small chains of actions |

---

## An example showing the difference

```javascript
console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

console.log('4');
```

**Output order:**

```javascript
1
4
3
2
```

Explanation:

1. `1` and `4` -> run synchronously (on the stack).
2. `Promise.then(...)` -> goes into the **microtask queue**.
3. `setTimeout(...)` -> goes into the **macrotask queue**.
4. After the stack clears, **all microtasks** run -> printing `3`.
5. Then the **first macrotask** runs -> printing `2`.

---

## An important detail

After every **macrotask**, the Event Loop:

1. Runs **all microtasks** (until the queue is empty),
2. Then takes the **next macrotask**,
3. Repeats the cycle.

---

## Visually

```javascript
┌─────────────────────────────────────────────────────┐
│  Function calls (Call Stack)                         │
│─────────────────────────────────────────────────────│
│  Microtasks (Microtask Queue)                        │ ← run right after the stack
│─────────────────────────────────────────────────────│
│  Macrotasks (Task Queue)                              │ ← run after the microtasks
└─────────────────────────────────────────────────────┘
```

---

## Summary

| What | When | Example |
|---|---|---|
| **Microtask** | After the current code, before macrotasks | `Promise.then`, `queueMicrotask` |
| **Macrotask** | After all microtasks | `setTimeout`, `setInterval`, `fetch` |
| **Event Loop** | Ensures the stack is empty -> microtasks -> macrotask -> repeat | - |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts367 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.