Потік виконання JavaScript: стек викликів, мікрозадачі та макрозадачі

JavaScript має унікальний спосіб виконання коду за допомогою Call Stack (стека викликів) та Event Loop (циклу подій), який керує асинхронними задачами, розділеними на Microtasks (мікрозадачі) та Macrotasks (макрозадачі). Давайте розберемо це поетапно:

1. Call Stack (Стек викликів)

• Call Stack – це структура даних, яка відстежує виклики функцій.
• JavaScript є однопоточним (single-threaded), тобто може виконувати лише одну задачу за раз.
• Коли функція викликається, вона додається у стек (push). Після завершення виклику функція видаляється зі стека (pop).

Приклад:

function first() {  
 console.log("First");  
}  

function second() {  
 console.log("Second");  
 first();  
}  

second();

Послідовність виконання:

1. second() додається у стек.
2. Всередині second() викликається first(), яка також додається у стек.
3. console.log("First") виконується, після чого first() видаляється зі стека.
4. console.log("Second") виконується, після чого second() видаляється зі стека.

2. Event Loop (Цикл подій)

Event Loop забезпечує, щоб Call Stack залишався порожнім перед обробкою відкладених задач. Якщо стек порожній, цикл подій перевіряє Task Queue (чергу задач), яка містить мікрозадачі (Microtasks) та макрозадачі (Macrotasks).

3. Microtasks (Мікрозадачі)

Мікрозадачі мають найвищий пріоритет і виконуються відразу після завершення поточної операції та очищення Call Stack.

Приклади мікрозадач:

1. Promises (проміси)

• Promise.resolve().then(...)
• async/await (обробляється як мікрозадача).

1. MutationObserver

• API для відстеження змін у DOM.

1. queueMicrotask()

• Метод для явного планування мікрозадачі.

Основні характеристики:

• Мікрозадачі обробляються раніше макрозадач.
• Усі мікрозадачі в черзі виконуються послідовно перед переходом до наступної макрозадачі.

4. Macrotasks (Макрозадачі)

Макрозадачі – це заплановані задачі, які обробляються після очищення поточного стека та після мікрозадач.

Приклади макрозадач:

1. Timers (таймери)

• setTimeout
• setInterval

1. UI Rendering

• Задачі рендерингу браузера, наприклад, reflows і repaints.

1. setImmediate (лише у Node.js)

2. I/O tasks

• Операції введення/виведення, такі як читання або запис файлів.

1. MessageChannel

• Для міжпотокового зв’язку.

Основні характеристики:

• Макрозадачі мають нижчий пріоритет, ніж мікрозадачі.
• Лише одна макрозадача виконується після завершення всіх мікрозадач.

5. Приклад суміщення

console.log("Script start");  

setTimeout(() => console.log("Macrotask 1"), 0);  

Promise.resolve().then(() => {  
 console.log("Microtask 1");  
 Promise.resolve().then(() => console.log("Microtask 2"));  
});  

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

console.log("Script end");

Script start  
Script end  
Microtask 1  
Microtask 2  
Macrotask 1  
Macrotask 2

Послідовність виконання:

1. console.log("Script start") виконується (синхронна задача).
2. setTimeout додає дві макрозадачі.
3. Promise.resolve() додає мікрозадачу.
4. console.log("Script end") виконується (синхронна задача).
5. Виконується черга мікрозадач:

• console.log("Microtask 1")
• Promise.resolve() додає ще одну мікрозадачу (console.log("Microtask 2")).
• console.log("Microtask 2").

1. Виконується черга макрозадач:

• console.log("Macrotask 1")
• console.log("Macrotask 2").

6. Підсумок порядку виконання

1. Синхронний код (функції та змінні, що виконуються у Call Stack).
2. Мікрозадачі:

• Проміси (Promises), queueMicrotask, і MutationObserver.
• Функції, що виконуються як частина мікрозадач.

1. Макрозадачі:

• setTimeout, setInterval, задачі введення/виведення тощо.

1. Задачі рендерингу інтерфейсу користувача (специфічно для браузера).

Візуалізація виконання

1. Call Stack: Виконує синхронний код і виклики функцій.
2. Task Queue:

• Microtasks Queue: Черга високопріоритетних задач, таких як проміси.
• Macrotasks Queue: Черга задач із нижчим пріоритетом, таких як setTimeout.

1. Event Loop: Постійно перевіряє і обробляє черги задач.

Цей процес гарантує, що JavaScript залишається асинхронним і ефективним.

Розуміння цього механізму допоможе вам писати продуктивний та передбачуваний код!

Перекладено з: JavaScript Execution Flow: Call Stack, Microtasks, and Macrotasks