Event loop - Менеджер асинхронных вызовов. По сути, это бесконечный цикл, который следит за очередями задач и обеспечивает их выполнение
Event loop - состоит несколько основных частей:
➖Heap - Участок памяти, где хранятся объекты и данные, которые создаются в процессе работы программы
➖Callstack - Стек вызовов. Когда вы вызываете функцию, она попадает в стек. После выполнения она удаляется из стека
➖WebApi - Функции и интерфейсы, предоставляемый браузером
➖Macrotask - очередь куда попадают функции по правилу FIFO. Крупные задачи, такие как setTimeout, setInterval, обработчики событий, сетевые запросы
console.log("Start");
setTimeout(() => {
console.log("Macrotask: Timeout");
}, 0);
console.log("End");
// Вывод:
// Start
// End
// Macrotask: Timeout➖Microtask - имеют более высокий приоритет, чем макротаски, и выполняются после текущей операции, но перед макротасками. Это такие операции, как Promise или queueMicrotask
console.log("Start");
Promise.resolve().then(() => {
console.log("Microtask: Promise");
});
setTimeout(() => {
console.log("Macrotask: Timeout");
}, 0);
console.log("End");
// Вывод:
// Start
// End
// Microtask: Promise
// Macrotask: Timeout❔Как работает Event Loop?
1️⃣ Стек вызовов (Call Stack) обрабатывает синхронный код.
2️⃣ Когда встречается асинхронная операция, она передаётся в Web API, который управляет её выполнением.
3️⃣ После завершения Web API передаёт задачу в очередь Macrotasks или Microtasks.
4️⃣ Event Loop следит за Call Stack и очередями задач. Когда стек вызовов пуст, Event Loop начинает обработку микротасков.
5️⃣ После выполнения всех микротасков Event Loop переходит к макротаскам