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

Основные компоненты:

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

Как это работает:

JavaScript выполняет код, помещая функции в Call Stack.
Когда встречается асинхронная операция (например, setTimeout), она передается в Web API, а основной поток продолжает работу.
По завершении асинхронной операции соответствующий колбэк помещается в Callback Queue.
Event Loop постоянно проверяет, пуст ли Call Stack. Если он пуст, Event Loop берет первый колбэк из Callback Queue и помещает его в Call Stack для выполнения.

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

Пример:

console.log('Start');
setTimeout(() => {
  console.log('Timeout');
}, 0);
console.log('End');

Вывод будет:

Start
End
Timeout

Потому что колбэк setTimeout попадает в очередь и выполнится после того, как основной стек освободится.

Объясни механизм Event Loop в браузере