Что можешь рассказать про асинхронность в браузере и Event Loop? Из чего он состоит?

Асинхронность в браузере позволяет выполнять операции, не блокируя основной поток выполнения, что обеспечивает плавный пользовательский интерфейс.

Event Loop — это механизм, который управляет выполнением кода, обработкой событий и асинхронных задач в JavaScript.

Он состоит из нескольких частей:

• Call Stack (стек вызовов) — где выполняется текущий код.
• Callback Queue (очередь обратных вызовов) — хранит функции, готовые к выполнению после завершения асинхронных операций.
• Microtask Queue (очередь микрозадач) — содержит задачи с более высоким приоритетом, например, промисы.

Принцип работы:

1. Выполняется синхронный код из стека вызовов.
2. Когда стек пуст, Event Loop проверяет очередь микрозадач и выполняет их все.
3. Затем Event Loop берет одну задачу из очереди обратных вызовов и помещает её в стек для выполнения.
4. Цикл повторяется.

Пример:

console.log('Start');

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

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

console.log('End');

Вывод будет:

Start
End
Promise
Timeout

Потому что микрозадачи (промисы) выполняются раньше задач из очереди обратных вызовов (setTimeout).

Таким образом, Event Loop обеспечивает асинхронное выполнение кода, позволяя браузеру оставаться отзывчивым.