Тяжёлые вычисления без зависания интерфейса
Вопрос
На странице нужно обработать большой массив данных, и при этом интерфейс зависает. Как бы вы это решали?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Причина: долгая задача занимает главный поток, нет отрисовки и реакции на ввод
Измерить: Performance в DevTools, long tasks дольше 50 мс, метрика INP
Дробление на куски с уступкой потока через `setTimeout` или `scheduler.yield()`, не через промисы
Вынос вычислений в Web Worker с передачей данных через `postMessage` и transferable
Уменьшить работу: виртуализация списка, мемоизация, обработка на сервере
В React: `useTransition`/`useDeferredValue` для несрочных обновлений
Что могут спросить следом
- Почему дробление через
Promise.thenне помогает? - Как передать в воркер большой массив без копирования?
- Что такое INP?
Разбор
Образцовый ответ: «Сначала убедился бы, что проблема в главном потоке: записал профиль в Performance, нашёл долгие задачи, всё, что дольше 50 мс, пользователь ощущает как подвисание, и это бьёт по INP. Дальше варианты. Если работу можно разбить, обрабатываю кусками и между ними уступаю поток через setTimeout или scheduler.yield(): каждый кусок становится отдельной задачей, браузер между ними рисует и обрабатывает клики. Через промисы дробить бесполезно, микрозадачи выполняются подряд без отрисовки. Если вычисление чистое и тяжёлое, выношу его в Web Worker: там свой поток, данные отправляю postMessage, а большие буферы передаю как transferable, без копирования. Ещё смотрю, нельзя ли работы сделать меньше: виртуализировать длинный список, кешировать результат или посчитать на сервере. В React несрочные обновления помечаю через useTransition, чтобы ввод оставался отзывчивым».
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.