Как Browser APIs взаимодействуют с Event Loop?

Как Browser APIs взаимодействуют с Event Loop

JavaScript является однопоточным языком с одним стеком вызовов. Для выполнения асинхронных операций, таких как таймеры, HTTP-запросы или обработка событий, браузер предоставляет Web APIs (или Browser APIs). Эти API работают вне основного потока JavaScript, что позволяет не блокировать выполнение кода.

Механизм работы

Когда вы вызываете, например, setTimeout(callback, 1000), браузер запускает таймер в отдельном потоке (или использует системный таймер). По истечении времени колбэк не выполняется сразу, а помещается в очередь задач (callback queue или macrotask queue). Event Loop — это бесконечный цикл, который постоянно проверяет два условия:

• Пуст ли стек вызовов (call stack)?
• Есть ли задачи в очереди?

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

Микрозадачи и макрозадачи

Важно различать два типа очередей: очередь микрозадач (microtask queue) и очередь макрозадач (macrotask queue). Промисы и MutationObserver создают микрозадачи, которые имеют более высокий приоритет. После каждого макрозадачи Event Loop сначала обрабатывает все микрозадачи, прежде чем перейти к следующей макрозадаче.

console.log('1'); // синхронно

setTimeout(() => console.log('2'), 0); // макрозадача

Promise.resolve().then(() => console.log('3')); // микрозадача

console.log('4'); // синхронно

// Вывод: 1, 4, 3, 2

В этом примере сначала выполняются синхронные console.log('1') и console.log('4'). Затем, так как стек пуст, Event Loop обрабатывает микрозадачу (промис) и выводит '3'. Только после этого берётся макрозадача из setTimeout и выводится '2'.

Практическое применение

Понимание этого механизма критично для написания эффективного асинхронного кода, особенно при работе с анимациями, загрузкой данных или обработкой пользовательского ввода. Например, если вы поместите тяжёлую синхронную операцию в микрозадачу, она может заблокировать рендеринг страницы.

Вывод: Browser APIs и Event Loop обеспечивают неблокирующую асинхронность в JavaScript. Это позволяет создавать отзывчивые веб-приложения, где длительные операции (сетевые запросы, таймеры) не блокируют пользовательский интерфейс. Знание приоритетов очередей помогает избежать неожиданного порядка выполнения кода.