Чому не варто блокувати event loop?

JavaScriptJunior~1 хв читання

Що таке 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, шифрування тощо), решта запитів стане в чергу - сервер перестане відповідати.

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

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

javascript

function heavyTask() {
  let i = 0;
  function step() {
    while (i < 1e9 && i % 1e5 !== 0) i++;
    if (i < 1e9) setTimeout(step); // віддати керування Event Loop
  }
  step();
}

Використовуй Web Workers (у браузері) Для важких обчислень - виконуй код в окремому потоці, щоб не заважати основному.
У Node.js - використовуй Worker Threads або child_process

javascript

import { Worker } from 'worker_threads';
new Worker('./heavy-task.js');

Не використовуй синхронні методи вводу-виводу:

fs.readFileSync - ні
fs.readFile - так
crypto.pbkdf2Sync - ні
crypto.pbkdf2 - так

Коротко

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.