Зачем нужно не блокировать поток выполнения кода?

Продвинутые темы

Не блокировать поток нужно, чтобы интерфейс оставался отзывчивым: JavaScript однопоточный, и тяжёлая синхронная работа «замораживает» UI — не реагирует на клики, не анимируется.

Проблема блокировки

JS выполняется в одном потоке. Пока идёт синхронный код, ничего другого не происходит — Event Loop не обрабатывает события, браузер не отрисовывает:

for (let i = 0; i < 1e9; i++) {} // UI замирает на всё время цикла

Во время такой работы:

Клики не реагируют.
Анимации замирают.
Страница «зависла».

Зачем не блокировать

Отзывчивость UI — пользователь может взаимодействовать во время долгих операций.
Плавность — анимации и рендеринг не прерываются.
Хороший UX — нет ощущения «зависания».

Как не блокировать

Асинхронные операции

Сеть, таймеры не блокируют — выполняются вне потока:

const data = await fetch(url); // поток свободен во время ожидания

Разбиение работы

Тяжёлую задачу дробят на части через setTimeout/микрозадачи/requestIdleCallback, давая браузеру «дышать».

Web Workers

Тяжёлые вычисления выносят в отдельный поток:

const worker = new Worker('heavy.js'); // не блокирует основной поток

Виртуализация, дебаунс/троттлинг

Уменьшают объём синхронной работы.

Коротко для собеседования

Не блокировать поток нужно, потому что JS однопоточный: тяжёлая синхронная работа замораживает UI (нет реакции на клики, анимации, рендер). Чтобы сохранить отзывчивость — используют асинхронные операции (не блокируют на I/O), разбивают тяжёлую работу на части и выносят вычисления в Web Workers.