update browser

docs/javascript/08-promises/07-event-loop.md

@@ -0,0 +1,68 @@
+---
+sidebar_position: 7
+---
+
+# Event loop
+Источник: DeepSeek \
+Видеоразбор: [JavaScript - Event Loop | Асинхронность, Web API, Очереди (макро/микро)задач, Отрисовка кадров](https://www.youtube.com/watch?v=YTLXrji4DJc)
+
+Event Loop (цикл событий) — это механизм, который позволяет JavaScript выполнять асинхронные операции, несмотря на то, что сам язык является однопоточным. Он отвечает за обработку событий, вызовов колбэков и выполнение задач в правильном порядке.
+
+## Основные компоненты Event Loop
+1. **Call Stack (стек вызовов):**
+   - Это структура данных, которая отслеживает текущие выполняемые функции.
+   - Когда функция вызывается, она добавляется в стек. Когда функция завершается, она удаляется из стека.
+   - JavaScript однопоточный, поэтому в один момент времени может выполняться только одна задача.
+2. **Web APIs (или Browser APIs):**
+   - Это API, предоставляемые браузером (или средой выполнения, например, Node.js), которые позволяют выполнять асинхронные операции, такие как `setTimeout`, `fetch`, `XMLHttpRequest`, обработка событий (клики, таймеры и т.д.).
+   - Когда асинхронная операция запускается, она передается в Web API, и основной поток JavaScript продолжает выполнение.
+3. **Callback Queue (очередь колбэков):**
+   - Когда асинхронная операция завершается, ее колбэк помещается в очередь колбэков.
+   - Примеры: колбэки из `setTimeout`, обработчики событий.
+4. **Microtask Queue (очередь микрозадач):**
+   - Это отдельная очередь для микрозадач, таких как промисы (`Promise`) и `MutationObserver`.
+   - Микрозадачи имеют приоритет над задачами из Callback Queue.
+5. **Event Loop:**
+   - Это бесконечный цикл, который проверяет, пуст ли Call Stack.
+   - Если Call Stack пуст, Event Loop берет задачи из Callback Queue и Microtask Queue и помещает их в Call Stack для выполнения.
+
+## Как работает Event Loop
+1. Синхронный код:
+   - Весь синхронный код выполняется сразу, попадая в Call Stack.
+2. Асинхронный код:
+   - Когда встречается асинхронная операция (например, `setTimeout` или `fetch`), она передается в Web API, и основной поток продолжает выполнение.
+   - После завершения асинхронной операции ее колбэк помещается в Callback Queue (или Microtask Queue, если это промис).
+3. Обработка очередей:
+   - Когда Call Stack пуст, Event Loop сначала проверяет Microtask Queue.
+   - Все микрозадачи (например, колбэки промисов) выполняются до того, как Event Loop перейдет к Callback Queue.
+   - После выполнения всех микрозадач Event Loop берет задачи из Callback Queue и помещает их в Call Stack.
+
+## Пример работы Event Loop
+```js
+console.log("Start");
+
+setTimeout(() => {
+  console.log("Timeout");
+}, 0);
+
+Promise.resolve().then(() => {
+  console.log("Promise");
+});
+
+console.log("End");
+```
+#### Вывод:
+```
+Start
+End
+Promise
+Timeout
+```
+
+#### Объяснение:
+1. Сначала выполняется синхронный код: `console.log("Start")` и `console.log("End")`.
+2. `setTimeout` передается в Web API, а его колбэк попадает в Callback Queue.
+3. Промис сразу резолвится, и его колбэк попадает в Microtask Queue.
+4. После завершения синхронного кода Event Loop сначала выполняет микрозадачи (колбэк промиса), а затем переходит к Callback Queue (колбэк `setTimeout`).
+
+Event Loop позволяет JavaScript эффективно обрабатывать асинхронные операции, несмотря на однопоточность. Он управляет порядком выполнения задач, используя Call Stack, Web APIs, Callback Queue и Microtask Queue. Понимание этого механизма важно для написания эффективного и предсказуемого асинхронного кода.