Skip to main content
Практика завдань

Event Loop: мікрозадачі vs макрозадачі

Event Loop — це механізм у JavaScript, який керує асинхронними задачами та чергами подій. Він дозволяє JavaScript працювати в однопоточній моделі, обробляючи асинхронні операції без блокування основного потоку виконання.

Як працює Event Loop?

Event Loop — це безкінечний цикл, який виконує обробники подій. Під час своєї роботи браузер розподіляє задачі на дві основні черги:

  • Мікрозадачі — задачі, такі як проміси, queueMicrotask(), MutationObserver.
  • Макрозадачі — задачі, такі як setTimeout, події, таймери, запити fetch.

Основний порядок виконання

  1. Спочатку виконуються всі синхронні задачі з Call Stack.
  2. Потім виконуються всі задачі з черги мікрозадач. Усі мікрозадачі виконуються перед тим, як буде взято наступну макрозадачу.
  3. Після виконання всіх мікрозадач черга очищається.
  4. Далі одна макрозадача береться з черги макрозадач і виконується.
  5. Після виконання макрозадачі браузер перевіряє, чи потрібно перемалювати сторінку.
  6. Цикл повторюється.

Структури даних

  1. Call Stack (LIFO — останній прийшов, перший вийшов):

    • містить усі функції, що виконуються в даний момент;
    • виклик функції додає її до стеку;
    • після виконання функція видаляється зі стеку.

  2. Web API:

    • асинхронні операції (setTimeout, події, fetch) обробляються поза Call Stack;
    • після завершення вони потрапляють у чергу колбеків.

  3. Callback Queue (FIFO — перший прийшов, перший вийшов):

    • зберігає функції, які мають виконатися, коли стек викликів стане порожнім;
    • Event Loop переносить їх у Call Stack для виконання.

Мікрозадачі vs макрозадачі

  • Макрозадачі:

    • приклади: setTimeout, події (onClick, onChange), fetch;
    • виконуються по одній після синхронного коду та мікрозадач.

  • Мікрозадачі:

    • приклади: проміси, queueMicrotask(), MutationObserver;
    • виконуються одразу після синхронного коду і перед макрозадачами.

Приклад

javascript
console.log("First message"); setTimeout(() => { console.log("Second message"); }, 0); Promise.resolve().then(() => console.log("Third message")); console.log("Fourth message");

Що відбувається:

  • First message виводиться першим (синхронний код).
  • setTimeout(..., 0) додає колбек у чергу макрозадач.
  • Promise.resolve().then(...) додає колбек у чергу мікрозадач.
  • Fourth message виводиться далі (синхронний код).
  • Після синхронного коду виконується мікрозадача: Third message.
  • Потім виконується макрозадача: Second message.

Важливо: мікрозадачі мають вищий пріоритет над макрозадачами.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?
Практика завдань
Назад
Далі