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

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

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

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

Контент

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

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

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

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

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

## Коротко

Коли в JavaScript відбувається **блокуюча операція**,
**event loop** (цикл подій) **чекає**,
поки вона закінчиться,
а отже, весь інтерфейс "зависає", кнопки не натискаються,
анімації та мережеві запити не обробляються.

## Приклад блокуючої операції

```javascript
console.log('A');

function block(ms) {
  const start = Date.now();
  while (Date.now() - start < ms) {}
}

block(3000); // блокуємо потік на 3 секунди

console.log('B');
```

Вивід:

```javascript
A
(пауза 3 секунди)
B
```

Поки виконується `while`,
JS не може робити **нічого іншого**:
не обробляти кліки, не запускати таймери, не оновлювати інтерфейс.
Це і є **blocking**.

## Чому це відбувається

JavaScript працює в **одному потоці** (single thread):
в один момент часу в **Call Stack (стеку викликів)**
може виконуватися лише **одна задача**.

Коли туди потрапляє довгий код,
він **займає весь потік**,
і **решта задач (зокрема асинхронні)** чекають, поки він закінчиться.

Навіть якщо у тебе є `setTimeout`, він не виконається,
поки стек не звільниться.

## Візуально

```javascript
┌──────────────────────┐
│ Call Stack           │ ← виконує блокуючу операцію
│ (зайнятий надовго)   │
└──────────────────────┘
       ↓
Event Loop чекає
Черга колбеків чекає
```

Жодна асинхронна задача не може потрапити в стек,
поки блокуюча не завершиться.

## Приклади типових блокуючих операцій у JS

| Операція | Чому блокує |
| --- | --- |
| Довгий `while` / `for` | займає процесор |
| Великі обчислення (рекурсія, сортування, криптографія) | блокує потік |
| `alert()`, `prompt()` | зупиняє виконання скрипту |
| `sync`-версії методів Node.js (`fs.readFileSync`) | чекають результат |
| Довгі JSON-перетворення (`JSON.stringify(величезний_об'єкт)`) | виконуються синхронно |

## Що відбувається з асинхронним кодом при блокуванні

```javascript
console.log('1');

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

const start = Date.now();
while (Date.now() - start < 3000) {} // блокуючий цикл 3 сек

console.log('3');
```

Вивід:

```javascript
1
(пауза 3 секунди)
3
2
```

`setTimeout(..., 0)` не допоміг:
його колбек потрапив у чергу,
але **не міг виконатися**,
поки стек не звільнився після `while`.

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

**Розбивати великі задачі** на частини (через `setTimeout` / `requestIdleCallback`):

```javascript
function bigTask() {
  for (let i = 0; i < 1e9; i++) {
    if (i % 1e6 === 0) console.log(i);
  }
}

setTimeout(bigTask, 0); // виконується асинхронно, не блокуючи інтерфейс
```

**Використовувати Web Workers** - для важких обчислень в окремому потоці:

```javascript
// worker.js
onmessage = (e) => {
  const result = e.data ** 2;
  postMessage(result);
};
```

**У Node.js** - використовувати `fs.promises` замість `fs.readFileSync`.

## Приклад з життя

Уяви, що у тебе один офіціант (JS потік):

- **Блокуючий** код - офіціант чекає, поки приготується страва, і не обслуговує інших.
- **Неблокуючий** - він передає замовлення на кухню і йде обслуговувати наступний стіл.

JavaScript - як другий варіант.
Але якщо офіціант сам почне "заважати суп" протягом 10 хвилин (CPU-важкий код),
все, обслуговування зупиниться.

## Підсумок

| Термін | Що означає |
| --- | --- |
| **Блокуюча операція** | Задача, яка зупиняє виконання решти коду |
| **Результат** | Event loop "заморожується", UI не реагує |
| **Приклади** | Довгі цикли, sync-функції, alert(), великі обчислення |
| **Як уникнути** | Асинхронні API, Web Workers, розділення задач |

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

Для рев’юера

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

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