Спроектируйте компонент поиска с автодополнением.
- Frontend system design — поиск с подсказками
Уточнить требования (источник данных, объём, задержка, мобильные, офлайн), затем: debounce ввода (~150–300 мс), отмена устаревших запросов (AbortController) и защита от гонок ответов, кэш результатов по запросу, минимальная длина запроса, клавиатурная навигация и ARIA (combobox, listbox, aria-activedescendant), подсветка совпадений, состояния загрузки, пустого результата и ошибки. Для больших списков — виртуализация.
- API: пагинация, лимит, ограничение частоты; кэширующий CDN для популярных запросов
- Локальный поиск по небольшому словарю — без сети, через Web Worker при большом объёме
- Метрики: время до подсказки, доля выбранных подсказок
А ещё Интервьюер ждёт обсуждения компромиссов: debounce против мгновенного отклика, кэш против свежести
Подробно
Компоненты:
- поле ввода (контролируемое), список подсказок, состояние выделения;
- слой данных: debounce, кэш (LRU на сотни запросов), отмена, повторы;
- отрисовка: выделение совпадений без
innerHTML, виртуализация.
Доступность:
role="combobox",aria-expanded,aria-controls;- список
role="listbox", элементыrole="option"; - стрелки, Enter, Escape; объявление числа результатов через
aria-live.
Крайние случаи: быстрый ввод и удаление, ответы не по порядку, медленная сеть, офлайн, длинные строки, мобильная клавиатура, IME для ввода иероглифов.
Производительность: без перерисовки всего списка на каждый символ, дешёвые обработчики ввода (INP).
Что хотят услышать
- Требования до решения.
- Debounce, отмена, кэш и гонки.
- Доступность и крайние случаи.
Проверьте себя
Несколько верных вариантов. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✓Debounce ввода и отмена устаревших запросов через AbortController
- ✓Кэш результатов по запросу
- ✗Отправлять запрос на каждое нажатие клавиши без отмены
- ✓Клавиатурная навигация и ARIA-роли combobox и listbox
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.