Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Чому не варто блокувати event loop?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що таке Event Loop

Event Loop - це механізм, який:

- послідовно **виконує завдання (колбеки, проміси, таймери, події)**;
- обробляє **асинхронні операції**;
- відповідає за **реакцію інтерфейсу** і **відгук застосунку**.

> JS - однопотокова мова: у кожен момент часу виконується **тільки одна інструкція**.
> Якщо щось довго виконується - все інше стоїть у черзі і **чекає**.

---

## Що означає "блокувати Event Loop"

**Блокування Event Loop** - це ситуація, коли JS виконує **тривалу синхронну операцію** (наприклад, обчислення, нескінченний цикл, синхронне читання файлу тощо),
і поки вона не завершиться, **інші події не обробляються**.

Приклад:

```javascript
console.log("Початок");

for (let i = 0; i < 1e9; i++) {} // блокує Event Loop

console.log("Кінець");
```

Поки триває цей цикл:

- браузер **не реагує на кліки, скрол, ввід**;
- **не виконуються таймери і проміси**;
- UI **"висить"**.

---

## Чому це погано

### 1. Зависання інтерфейсу

Користувач не може взаємодіяти із сайтом: кнопки, поля вводу, анімації - все "заморожено".

### 2. Асинхронні операції не виконуються

Ні `setTimeout`, ні `fetch`, ні `Promise.then` не запустяться, поки блокування не закінчиться.

```javascript
setTimeout(() => console.log("Минула 1с"), 1000);
while (Date.now() < Date.now() + 5000) {} // блокує на 5 сек
```

Результат:

```javascript
(через 5 секунд) Минула 1с
```

Таймер **спрацював із запізненням**.

### 3. Втрата продуктивності в Node.js

Якщо на сервері Node.js виконується CPU-важке завдання (наприклад, парсинг великого JSON, шифрування тощо),
решта запитів **стане в чергу** - сервер перестане відповідати.

---

## Як уникнути блокування

1. **Розділяй обчислення на частини (chunking):**

```javascript
  function heavyTask() {
    let i = 0;
    function step() {
      while (i < 1e9 && i % 1e5 !== 0) i++;
      if (i < 1e9) setTimeout(step); // віддати керування Event Loop
    }
    step();
  }
  ```
2. **Використовуй Web Workers (у браузері)**
Для важких обчислень - виконуй код **в окремому потоці**, щоб не заважати основному.
3. **У Node.js - використовуй Worker Threads або child_process**

```javascript
  import { Worker } from 'worker_threads';
  new Worker('./heavy-task.js');
  ```
4. **Не використовуй синхронні методи вводу-виводу:**
  - `fs.readFileSync` - ні
  - `fs.readFile` - так
  - `crypto.pbkdf2Sync` - ні
  - `crypto.pbkdf2` - так

---

## Коротко

| Причина | Що відбувається |
|---|---|
| JS - однопотоковий | Все виконується в одному потоці |
| Блокуючий код | Затримує Event Loop |
| UI перестає реагувати | "Фриз" інтерфейсу |
| Сервер "висне" | Запити не обробляються |
| Рішення | Асинхронність, chunking, воркери |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати391 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.