Какие механизмы в JavaScript позволяют писать отзывчивые пользовательские приложения

Что проверяют

Понимаете ли вы, что JavaScript на странице выполняется в одном главном потоке и что асинхронность сама по себе не делает интерфейс отзывчивым. Следом обычно спрашивают, чем микрозадача отличается от макрозадачи или как разбить долгий цикл, который подвешивает страницу.

Как отвечать

Начните с event loop: между задачами браузер обрабатывает ввод и рисует кадр. Задача дольше 50 мс считается long task, и пользователь видит задержку на клик. Отсюда каркас:

• асинхронный ввод-вывод: fetch, Promise, async/await освобождают поток на время ожидания сети. Но код после await снова выполняется в главном потоке, а длинная цепочка микрозадач блокирует отрисовку так же, как синхронный цикл;
• разбиение работы: тяжёлый цикл режут на порции и отдают управление через setTimeout, scheduler.postTask или scheduler.yield(). Поддержка у планировщика пока неполная, нужен запасной вариант;
• requestAnimationFrame: визуальные изменения синхронно с кадром, а requestIdleCallback для неважной фоновой работы;
• Web Workers: вычисления в отдельном потоке без доступа к DOM, обмен через postMessage, большие буферы передаются как transferable без копирования. OffscreenCanvas уносит в воркер и отрисовку;
• приоритеты в React: useTransition и useDeferredValue помечают обновление как несрочное, и ввод в поле не ждёт перерисовки тяжёлого списка;
• дешёвые обработчики: debounce и throttle, пассивные слушатели { passive: true } для скролла, виртуализация длинных списков.

Отзывчивость измеряется метрикой INP, которая с 2024 года входит в Core Web Vitals вместо FID. Хорошим считается значение до 200 мс.

Где спотыкаются

Говорят, что Promise выполняет код в фоне. Промис не создаёт поток, синхронная работа внутри него блокирует страницу.

Называют виртуальный DOM источником отзывчивости. Он сокращает число операций с DOM, но тяжёлый рендер компонента всё равно занимает главный поток.

Отправляют в Web Worker мелкие задачи. Копирование данных через postMessage может стоить дороже самой работы, воркер окупается на десятках миллисекунд вычислений.