Техпрогон
ВойтиНачать бесплатно

Вопросы для собеседования frontend-разработчика

Готовый набор для интервьюера: 36 вопросов с тезисами эталонного ответа, задача, рубрика и план встречи.

Junior: 12Middle: 12Senior: 12ЗадачаРубрика
Провести мок по ссылке
Коротко

На собеседовании frontend-разработчика хорошо работает схема на 60 минут: 3-4 устных вопроса по стеку, одна задача на live coding, проектирование для middle и выше и вопросы кандидата. Ниже вопросы по грейдам из базы Техпрогона: у каждого тезисы, которые должен назвать сильный кандидат.

Всего в базе по этой роли 386 устных вопросов с чек-листом ответа.

Обновлено

Как построить техсобес на 60 минут

0-5 мин

Знакомство

Кто вы, формат встречи, кандидат коротко о себе и последнем проекте.

5-20 мин

Вопросы по стеку

3-4 устных вопроса из набора ниже. Сверяйте ответ с тезисами.

20-45 мин

Live coding

Одна задача. Смотрите на процесс по рубрике, а не только на ответ.

45-55 мин

Проектирование

Для middle и выше: система или решение целиком. Для junior: ещё вопросы.

55-60 мин

Вопросы кандидата

Что спросил кандидат, тоже сигнал: интерес к задачам и команде.

Junior: 12 вопросов

Основы: как устроено и зачем. Хватит 3-4 вопросов на встречу.

1

Чем отличаются var, let и const? Что из них вы используете и почему?

JavaScript
Junior

Что хотим услышать

  • var с функциональной областью, let и const с блочной
  • var поднимается с undefined, let/const попадают в TDZ
  • var можно объявить повторно, let/const нет
  • const запрещает переприсваивание, но не изменение объекта
  • var на верхнем уровне скрипта становится свойством window
  • По умолчанию const, let для изменяемых, var не использую

Если ответил, копните глубже

Как сделать объект действительно неизменяемым?
Почему let в цикле for ведёт себя иначе, чем var?
Поднимается ли let?
Полный разбор ответа
2

Почему any считают вредным и чем его заменить?

TypeScript
Junior

Что хотим услышать

  • any выключает проверку в обе стороны: на нём можно вызвать что угодно и присвоить его куда угодно
  • any заразен: свойства и результаты вызовов на нём тоже any, ошибка уходит далеко от источника
  • Замена для неизвестных данных: unknown с сужением или валидацией
  • Замена для «любого, но одного и того же»: дженерик
  • Защита: noImplicitAny в strict и правило линтера no-explicit-any

Если ответил, копните глубже

Где any появляется неявно?
Когда any всё же оправдан?
Полный разбор ответа
3

Как работает useEffect: когда запускается, зачем массив зависимостей и функция возврата?

React
Junior
~2 мин

Что хотим услышать

  • эффект запускается после коммита и отрисовки
  • пустой массив - один раз при монтировании
  • без массива - после каждого рендера
  • возвращённая функция - очистка, вызывается перед следующим запуском и при размонтировании
  • зависимости сравниваются поверхностно через Object.is
  • в StrictMode в разработке эффект намеренно запускается дважды

Если ответил, копните глубже

Чем useLayoutEffect отличается и когда он нужен
Почему объект в зависимостях вызывает бесконечный цикл
Что делать, если функция-зависимость меняется каждый рендер
Полный разбор ответа
4

Объясни разницу между textContent, innerText и innerHTML. Что из этого и когда использовать?

Браузер и DOM
Junior

Что хотим услышать

  • textContent возвращает весь текст, включая скрытый, без учёта CSS
  • innerText учитывает стили, возвращает видимый текст и при чтении вызывает пересчёт layout
  • innerHTML читает и пишет разметку, присваивание парсит HTML
  • Пользовательские данные через innerHTML вставлять нельзя: это XSS
  • Перезапись innerHTML пересоздаёт потомков и теряет обработчики и состояние полей
  • По умолчанию для текста выбирать textContent

Если ответил, копните глубже

Как безопасно вставить разметку, если она всё же нужна?
Почему innerText медленнее textContent?
Что такое insertAdjacentHTML и чем он лучше innerHTML +=?
Полный разбор ответа
5

Чем отличаются display: inline, block и inline-block? Приведи пример, когда нужен каждый.

HTML и CSS
Junior

Что хотим услышать

  • block занимает всю доступную ширину и начинается с новой строки
  • inline течёт в строке, игнорирует width и height
  • У inline вертикальные margin не сдвигают соседей
  • inline-block стоит в строке, но принимает размеры и отступы как блок
  • Примеры: <p> и <div> блоки, <a> и <span> строчные, кнопка-тег inline-block
  • Сегодня для раскладки в ряд чаще берут flex, а не inline-block

Если ответил, копните глубже

Откуда берётся зазор между inline-block элементами?
Что делает display: contents?
Как ведёт себя <img> по умолчанию?
Полный разбор ответа
6

Объясни, что такое CORS и как он работает.

Сети и HTTP
Junior

Что хотим услышать

  • Same-origin policy: скрипт не может читать ответы другого origin (схема, хост, порт)
  • CORS: сервер заголовками Access-Control-Allow-* разрешает конкретным origin читать ответы
  • Проверяет браузер, сервер отвечает всегда; вне браузера CORS не действует
  • Простые запросы уходят сразу, остальные после preflight OPTIONS
  • С куками нужен credentials: 'include', Allow-Credentials: true и точный origin вместо *

Если ответил, копните глубже

Почему POST с JSON вызывает preflight?
Защищает ли CORS от CSRF?
Как бы ты обошёл CORS локально, не трогая бэкенд?
Полный разбор ответа
7

Объясни, как ты оцениваешь временную и пространственную сложность своего решения на собесе.

Алгоритмы
Junior

Что хотим услышать

  • Называет, что такое n (и m, если входов несколько)
  • Считает циклы: вложенные перемножаются, последовательные складываются
  • Помнит скрытые циклы: includes, indexOf, slice, sort, spread
  • Отдельно оценивает память, включая стек рекурсии
  • Сравнивает с ограничениями: при n до 10⁵ O(n²) уже не годится

Если ответил, копните глубже

Почему O(2n) и O(n) это одно и то же?
Какая сложность у arr.slice() внутри цикла?
Что такое амортизированная O(1)?
Полный разбор ответа
8

Перед тобой код на ревью. Скажи вслух, что здесь не так - по убыванию важности. Читай вслух, как на ревью: сначала что делает код, потом что сломано.

Архитектура фронтенда
Junior
~3 мин

Что хотим услышать

  • debounce создаётся заново на каждом рендере - откладывание не работает
  • нужен useMemo или useRef, чтобы функция пережила рендер
  • нет отмены отложенного вызова при размонтировании
  • q не экранирован через encodeURIComponent
  • нет отмены предыдущего запроса - остаётся гонка
  • проще перенести задержку в эффект с зависимостью от value

Если ответил, копните глубже

Почему вариант с useEffect чище?
Debounce убирает гонку запросов полностью?
Полный разбор ответа
9

Объясни, зачем фронтенд-проекту сборщик и что происходит с кодом от исходников до файлов в dist.

Инструменты
Junior

Что хотим услышать

  • граф зависимостей от точки входа
  • трансформация: TS, JSX, современный синтаксис, CSS
  • резолв пакетов из node_modules
  • склейка в чанки, минификация, tree shaking
  • хеши в именах для долгого кеша
  • dev-сервер с HMR и source maps

Если ответил, копните глубже

Почему Vite в dev быстрее webpack?
Почему ошибка типов не ломает сборку Vite?
Как бы ты уменьшил размер бандла?
Полный разбор ответа
10

Назовите ваши сильные стороны.

О себе и поведенческое
Junior

Что хотим услышать

  • Две-три стороны, а не список из десяти
  • Каждая подкреплена примером
  • Стороны связаны с вакансией
  • Нет пустых слов вроде «стрессоустойчивый, коммуникабельный» без доказательств
  • Уверенно, без хвастовства

Если ответил, копните глубже

Как это проявилось на последнем месте?
Что сказали бы о вас коллеги?
Какая из них самая важная для этой роли?
Полный разбор ответа
11

Как отменить сетевой запрос и зачем это нужно?

JavaScript
Junior
~2 мин

Что хотим услышать

  • AbortController создаёт signal, который передаётся в fetch
  • controller.abort() отклоняет промис ошибкой AbortError
  • AbortError нужно отличать от настоящей ошибки при обработке
  • в React отмена идёт в функции очистки useEffect
  • без отмены получаем гонку: ответ на старый запрос перезаписывает новый
  • один signal можно передать нескольким запросам сразу

Если ответил, копните глубже

Как ещё можно решить гонку, если отмены нет
Отменяет ли abort работу на сервере
Как сделать таймаут запроса через AbortSignal
Полный разбор ответа
12

Чем type отличается от interface и что вы выбираете в своём коде?

TypeScript
Junior

Что хотим услышать

  • Оба описывают форму объекта и в большинстве случаев взаимозаменяемы
  • Только interface сливается при повторном объявлении (declaration merging), это нужно для расширения чужих типов
  • Только type описывает объединения, кортежи, условные и mapped-типы, псевдонимы примитивов
  • Расширение: extends у interface против пересечения &; конфликт полей при extends даёт ошибку, при & поле становится never
  • Осознанное правило команды: например interface для публичных объектных контрактов, type для всего остального

Если ответил, копните глубже

Как добавить поле в тип Window?
Что будет при пересечении { a: string } & { a: number }?
Может ли класс реализовать type?
Полный разбор ответа

Middle: 12 вопросов

Практика: почему так, какие компромиссы, что ломается.

1

Объясни event loop: как браузер решает, что выполнять следующим.

JavaScript
Middle
~2 мин

Что хотим услышать

  • JS однопоточный, есть стек вызовов
  • макрозадачи: таймеры, события, сеть - по одной за цикл
  • микрозадачи: промисы, queueMicrotask, MutationObserver
  • после каждой макрозадачи очередь микрозадач вычерпывается полностью
  • рендер происходит между макрозадачами, requestAnimationFrame - перед отрисовкой
  • бесконечная генерация микрозадач заблокирует рендер

Если ответил, копните глубже

Что выведет код с async/await и setTimeout вперемешку
Куда попадает requestAnimationFrame относительно промисов
Почему setTimeout(fn, 0) срабатывает не через 0 мс
Полный разбор ответа
2

Напишите Pick и Omit своими словами и объясните, как они работают.

TypeScript
Middle

Что хотим услышать

  • Pick<T, K extends keyof T> = { [P in K]: T[P] }: mapped-тип по выбранным ключам
  • Ограничение K extends keyof T запрещает несуществующие ключи
  • Omit<T, K> = Pick<T, Exclude<keyof T, K>>: оставить все ключи, кроме указанных
  • У встроенного Omit ключ не ограничен keyof T, поэтому опечатка проходит молча
  • Оба не распределяются по объединению и работают на верхнем уровне

Если ответил, копните глубже

Как сделать Omit строгим?
Как написать распределённый Omit для объединения?
Почему Pick сохраняет readonly и ??
Полный разбор ответа
3

Как работает контекст и почему из-за него всё перерисовывается?

React
Middle
~2 мин

Что хотим услышать

  • все потребители перерисовываются при смене значения провайдера
  • сравнение идёт по ссылке на value
  • объект-литерал в value меняет ссылку каждый рендер
  • лечение: useMemo на value и разделение контекстов
  • контекст - про передачу, а не про управление состоянием
  • memo не спасает потребителя контекста

Если ответил, копните глубже

Как разделить контекст на данные и действия
Почему memo не спасает потребителя
Когда стоит уйти с контекста на Zustand или Redux
Полный разбор ответа
4

Тебе говорят: «страница тормозит». Как ты будешь искать и устранять проблему?

Браузер и DOM
Middle

Что хотим услышать

  • Уточнить, что именно медленно: загрузка, отклик на действия или прыжки вёрстки
  • Посмотреть полевые данные (CrUX, web-vitals в аналитике) и лабораторные (Lighthouse, Performance)
  • Для LCP: найти LCP-элемент, проверить TTFB, приоритет загрузки, блокирующие ресурсы
  • Для INP: найти длинные задачи в профиле, разбить работу, вынести в воркер, уменьшить JS
  • Для CLS: размеры у медиа, резерв места, шрифты
  • После правки измерить снова и следить за метриками в мониторинге

Если ответил, копните глубже

Как найти, какой элемент стал LCP?
Почему в Lighthouse всё хорошо, а у пользователей плохо?
Какой бюджет на JS ты бы поставил для мобильной страницы?
Полный разбор ответа
5

Как бы ты сделал доступное модальное окно? Что должно происходить с фокусом и клавиатурой?

HTML и CSS
Middle

Что хотим услышать

  • При открытии фокус переходит внутрь окна (на заголовок или первое поле)
  • Фокус не уходит на фон: ловушка фокуса или инертный фон
  • Escape закрывает окно
  • После закрытия фокус возвращается на кнопку, которая открыла окно
  • Роль dialog, aria-modal="true" и имя через aria-labelledby на заголовок
  • Нативный <dialog> с showModal() даёт большую часть этого из коробки

Если ответил, копните глубже

Как сделать фон недоступным для Tab и скринридера?
Что изменится, если окно не модальное, а всплывашка?
Как протестировать результат?
Полный разбор ответа
6

Чем отличаются сессии на куках и JWT? Что бы ты выбрал для обычного веб-приложения?

Сети и HTTP
Middle

Что хотим услышать

  • Сессия: id в куке, состояние на сервере (Redis/БД), отзыв мгновенный
  • JWT: состояние в самом токене, проверка подписью без базы, сложно отозвать
  • Для JWT нужна пара короткий access + отзываемый refresh
  • Хранение: HttpOnly кука защищает от XSS, но нужна защита от CSRF (SameSite)
  • Выбор по контексту: одно веб-приложение проще на сессиях, много сервисов и мобильные клиенты удобнее на токенах

Если ответил, копните глубже

Как отозвать JWT до истечения?
Где хранить токены в SPA?
Как масштабировать сессии на несколько серверов?
Полный разбор ответа
7

Объясни решение задачи «минимальное число монет для суммы» и его сложность. Почему тут не подходит жадность?

Алгоритмы
Middle

Что хотим услышать

  • Показывает контрпример для жадности
  • Формулирует состояние: dp[s] минимум монет для суммы s
  • Переход: dp[s] = min(dp[s - c] + 1) по монетам
  • База dp[0] = 0, остальные Infinity, недостижимо → -1
  • O(S · k) времени, O(S) памяти

Если ответил, копните глубже

Как посчитать число способов вместо минимума?
Как восстановить сами монеты?
Как решить сверху вниз?
Полный разбор ответа
8

Сравни CSR, SSR, SSG и ISR. Когда что выберешь?

Архитектура фронтенда
Middle

Что хотим услышать

  • CSR: пустой HTML, всё в браузере, дёшево, плохо для SEO и первого экрана; для кабинетов
  • SSR: HTML на каждый запрос, свежие данные и SEO, нагрузка на сервер и TTFB
  • SSG: HTML при сборке, CDN, самый быстрый, данные устаревают
  • ISR: статика с фоновой пересборкой, компромисс скорости и свежести
  • Гидрация нужна после SSR и SSG, до неё страница не интерактивна
  • Пример выбора по типам страниц одного продукта

Если ответил, копните глубже

Как выбрать для интернет-магазина?
Что такое TTFB и почему он растёт при SSR?
Полный разбор ответа
9

Как бы ты построил CI/CD для веб-приложения с нуля?

Инструменты
Middle

Что хотим услышать

  • На каждый PR: npm ci, линтер, типы, unit-тесты, сборка
  • Быстрые проверки первыми, независимые джобы параллельно, кеш зависимостей
  • Защита ветки main: мерж только с зелёным CI и ревью
  • Сборка один раз, артефакт (образ) с версией продвигается по стендам
  • Деплой на стенд автоматически, на прод с подтверждением или автоматически при хорошем покрытии
  • План отката и миграции, совместимые с предыдущей версией

Если ответил, копните глубже

Как ускорить пайплайн, который идёт 25 минут?
Где хранить секреты и кто к ним имеет доступ?
Как откатишься, если после релиза выросли ошибки?
Полный разбор ответа
10

Почему вы ищете новую работу?

О себе и поведенческое
Middle

Что хотим услышать

  • Причина через цель, а не через бегство
  • Ни слова негатива о текущем работодателе
  • Показано, что на текущем месте был рост и результаты
  • Связка с этой вакансией
  • Коротко: до минуты

Если ответил, копните глубже

Говорили ли вы с руководителем о росте?
Что должно быть на новом месте обязательно?
Как давно ищете?
Полный разбор ответа
11

Как устроено наследование в JavaScript? Что происходит при обращении к свойству?

JavaScript
Middle
~2 мин

Что хотим услышать

  • у каждого объекта есть ссылка на прототип - [[Prototype]]
  • поиск свойства идёт вверх по цепочке до null
  • proto - ссылка на прототип, prototype - свойство функции-конструктора
  • class - синтаксический сахар над этой же схемой
  • Object.create задаёт прототип напрямую
  • изменение прототипа во время работы убивает оптимизации движка

Если ответил, копните глубже

Чем class отличается от функции-конструктора на практике
Что делает Object.create(null) и зачем
Почему hasOwnProperty, а не просто проверка на undefined
Полный разбор ответа
12

Как типизировать функцию updateUser(id, patch), где patch может содержать любые поля пользователя, кроме id и createdAt?

TypeScript
Middle

Что хотим услышать

  • Базовый тип User один, остальные выводятся из него утилитами
  • Partial<Omit<User, 'id' | 'createdAt'>> для patch
  • Отдельно id: User['id'], чтобы тип id менялся вместе с моделью
  • Опасность Partial: можно передать пустой объект, при необходимости требовать хотя бы одно поле
  • Нюанс: Partial разрешает явный undefined, флаг exactOptionalPropertyTypes это запрещает

Если ответил, копните глубже

Как запретить пустой patch?
Чем плохо описать UpdateUserDto вручную?
Как быть с вложенными объектами?
Полный разбор ответа

Senior: 12 вопросов

Глубина и опыт: границы подходов, решения в продакшене.

1

Как бы вы реализовали перебор всех записей постраничного API так, чтобы вызывающий код просто писал for await (const item of allItems())?

JavaScript
Senior

Что хотим услышать

  • async function*, внутри цикл по страницам с await fetch
  • yield* по элементам страницы или yield поштучно
  • Условие остановки: нет курсора next или пустая страница
  • Ленивость: следующая страница грузится только когда потребитель дошёл до конца текущей
  • Досрочный break у потребителя завершает генератор, запросы прекращаются; finally для очистки
  • Ошибки и отмена: try/catch у потребителя, AbortSignal в параметрах

Если ответил, копните глубже

Как подгружать следующую страницу заранее, пока обрабатывается текущая?
Что будет, если потребитель бросит исключение в теле цикла?
Как ограничить общее число записей?
Полный разбор ответа
2

Объясните, как условный тип ведёт себя с объединением и когда это мешает.

TypeScript
Senior

Что хотим услышать

  • Голый параметр в T extends U даёт распределение по членам объединения
  • На этом построены Exclude, Extract, NonNullable
  • never как пустое объединение даёт never в результате
  • Отключение: [T] extends [U], нужно для IsNever и проверок всего объединения
  • Распределение срабатывает только для параметра типа, а не для конкретного объединения, записанного прямо в условии

Если ответил, копните глубже

Почему Exclude работает поэлементно?
Как проверить, что тип является объединением?
Что вернёт boolean extends true ? 1 : 2?
Полный разбор ответа
3

Как бы ты загрузил данные в компоненте через useEffect, чтобы это было корректно? И почему в реальном проекте ты, возможно, сделал бы иначе?

React
Senior

Что хотим услышать

  • Зависимости: всё, от чего зависит запрос, например id
  • Гонки: в очистке AbortController или флаг ignore
  • Состояния загрузки и ошибки, AbortError не считать ошибкой
  • StrictMode в dev отправит запрос дважды, это нормально при корректной очистке
  • Нет кеша, дедупликации, повторов и предзагрузки: каждый компонент грузит сам, возникают водопады
  • В проекте: TanStack Query, SWR, загрузчики роутера или серверные компоненты

Если ответил, копните глубже

Что такое водопад запросов и как его избежать?
Как показать скелетон через Suspense?
Как отменить запрос при размонтировании?
Полный разбор ответа
4

Объясни, из чего складывается INP и как ты его улучшал бы в большом SPA.

Браузер и DOM
Senior

Что хотим услышать

  • INP складывается из задержки ввода, времени обработчиков и задержки отрисовки
  • Задержку ввода создают длинные задачи, которые уже идут в момент клика
  • Разбивать работу и уступать главный поток: scheduler.yield или setTimeout
  • Сначала дать визуальный отклик, тяжёлое делать после
  • Сокращать JS, гидрацию и ререндеры: код-сплиттинг, startTransition, мемоизация, виртуализация
  • Мерить в поле с атрибуцией, чтобы знать конкретные медленные взаимодействия

Если ответил, копните глубже

Чем INP отличается от FID?
Как startTransition помогает отзывчивости?
Почему гидрация может портить INP?
Полный разбор ответа
5

Как бы ты сделал надёжный клиент WebSocket для чата, который переживает обрывы сети?

Сети и HTTP
Senior

Что хотим услышать

  • Реконнект с экспоненциальной задержкой и джиттером, сброс задержки после успеха
  • Heartbeat: ping/pong с таймаутом, при пропуске закрыть и переподключиться
  • Нумерация сообщений: после реконнекта клиент сообщает последний id, сервер досылает пропущенное
  • Очередь исходящих сообщений с клиентскими id, идемпотентность на сервере против дублей
  • Реакция на online/offline и видимость вкладки, повторная авторизация при истёкшем токене

Если ответил, копните глубже

Зачем джиттер в задержке реконнекта?
Как избежать дублей сообщения после повторной отправки?
Что делать, если сервер перезапускается и все клиенты переподключаются разом?
Полный разбор ответа
6

Спроектируй веб-клиент мессенджера как в Telegram Web: список чатов, переписка, отправка текста и фото, статусы «отправлено/прочитано», «печатает». Пройди этапы: требования, оценка нагрузки, API, данные, компоненты, узкие места.

Архитектура фронтенда
Senior

Что хотим услышать

  • Требования: список чатов, история, отправка, статусы, «печатает», уведомления, офлайн и плохая сеть
  • Оценка: тысячи чатов, длинная история, в групповом чате десятки сообщений в секунду, долгоживущая вкладка
  • API: WebSocket для событий (message.new, typing, read), REST для истории с курсором вверх, загрузка файлов отдельно
  • Данные: сообщения по чатам с клиентским id, нормализация, IndexedDB для кеша и офлайн-очереди
  • Компоненты: ChatList, ChatWindow с виртуализацией в обратном порядке, Composer, MessageBubble
  • Узкие места: порядок и дедупликация, переподключение с догрузкой пропущенного, батчинг обновлений, утечки памяти, позиция скролла при подгрузке истории

Если ответил, копните глубже

Как гарантировать порядок сообщений?
Что будет при обрыве соединения на 10 минут?
Как не дублировать сообщение при повторной отправке?
Полный разбор ответа
7

Ты приходишь в проект без тестов. Как выстроишь стратегию тестирования?

Инструменты
Senior

Что хотим услышать

  • начать с самого рискованного и ценного для бизнеса: оплата, вход, ключевые сценарии
  • несколько e2e smoke-тестов на критичные пути
  • unit-тесты на чистую логику: расчёты, форматирование, утилиты
  • интеграционные тесты компонентов и API на новых и изменяемых местах
  • тесты в CI как обязательная проверка PR
  • регрессионный тест на каждый найденный баг, борьба с флаки

Если ответил, копните глубже

Как убедить команду и бизнес выделить на это время?
Нужна ли цель по покрытию?
Как бороться с медленным тестовым набором?
Полный разбор ответа
8

Вы претендуете на senior. Расскажите о себе.

О себе и поведенческое
Senior

Что хотим услышать

  • Назван масштаб: команда, нагрузка, пользователи или деньги
  • Есть решения, которые повлияли дальше своего кода
  • Есть метрики результата
  • Упомянуто влияние на команду: менторинг, процессы, ревью
  • Уложился в 2 минуты, не утонул в деталях

Если ответил, копните глубже

Какое техническое решение было самым спорным?
Как вы растили людей в команде?
Что бы сделали иначе на последнем проекте?
Полный разбор ответа
9

Пользователи жалуются, что после пары часов работы SPA начинает тормозить, а вкладка занимает гигабайт. Как будете искать и исправлять?

JavaScript
Senior

Что хотим услышать

  • Воспроизвести сценарий и подтвердить рост: Performance с Memory, ступенчатый рост после сборок
  • Сузить до действия: какие переходы или операции увеличивают память
  • Heap snapshots до и после серии повторов, Comparison, Retainers
  • Проверить типичные причины: подписки, таймеры, detached DOM, глобальные кеши, сторы
  • Исправить и проверить тем же сценарием, добавить защиту: лимиты кешей, линтер на очистку эффектов
  • Мониторинг в проде: performance.memory или measureUserAgentSpecificMemory выборочно

Если ответил, копните глубже

Как отличить утечку от нормальной работы GC на графике памяти?
Что такое retained size и shallow size?
Что делать, если удерживает объект сторонняя библиотека?
Полный разбор ответа
10

Расскажите, как работают условные типы: распределение по объединению, infer, и где это нужно в прикладном коде.

TypeScript
Senior

Что хотим услышать

  • T extends U ? X : Y вычисляется на уровне типов, для обобщённого T откладывается до подстановки
  • Распределение: голый параметр с union применяется к каждому члену; отключается обёрткой [T]
  • never как пустое объединение даёт never в распределительном типе
  • infer объявляет переменную типа в шаблоне: ReturnType, Awaited, разбор строк
  • Прикладные примеры: тип ответа API по пути, извлечение параметров маршрута, Extract/Exclude

Если ответил, копните глубже

Как написать IsNever<T>?
Чем infer X extends C отличается от вложенной проверки?
Когда условные типы вредны?
Полный разбор ответа
11

Коллега предлагает обернуть все компоненты в memo, а все функции в useCallback. Что ответишь?

React
Senior

Что хотим услышать

  • Мемоизация не бесплатна: сравнение зависимостей, хранение кеша, шум в коде
  • Бесполезна без стабильных props: одна инлайн-функция ломает memo
  • useCallback без memo у получателя ничего не даёт
  • Неполные зависимости дают устаревшие значения, это новый класс багов
  • Сначала профилировать и чинить структуру
  • С React Compiler ручная мемоизация в основном не нужна, компилятор делает её точнее

Если ответил, копните глубже

Когда мемоизация действительно нужна?
Как проверить, что оптимизация сработала?
Что делать с кодом, который компилятор пропускает?
Полный разбор ответа
12

Как бы ты выстроил защиту от XSS в большом фронтенд-приложении?

Браузер и DOM
Senior

Что хотим услышать

  • Экранирование по умолчанию: фреймворк с автоэкранированием, запрет innerHTML в линтере
  • Пользовательский HTML только через санитайзер (DOMPurify)
  • Проверка протокола у пользовательских URL в href и src
  • Строгая CSP с nonce и strict-dynamic, сначала в Report-Only
  • Trusted Types, чтобы все вставки HTML шли через одну политику
  • HttpOnly-куки для сессии, SRI для сторонних скриптов

Если ответил, копните глубже

Как внедрить CSP в старое приложение с кучей инлайн-скриптов?
Чем DOM-based XSS отличается от хранимой?
Что делать со сторонними скриптами аналитики?
Полный разбор ответа

Задача для live coding

Отменяемая операция

КодJavaScriptMiddle~5 мин

Напиши makeCancelable(promise): вернуть {promise, cancel}. После cancel() итоговый промис отклоняется объектом {canceled: true}, а исходный результат игнорируется.

Хороший ход решения

Промис неотменяем по спецификации: мы отменяем не работу, а подписку. Флаг canceled + проверка в обоих обработчиках. Настоящая отмена сетевого запроса - это AbortController и signal, проговори это вслух как follow-up.

  • Подсказка, если застрял: Промис нельзя отменить - можно только перестать реагировать на его результат.
  • Подсказка, если застрял: Флаг в замыкании проверяется в обоих колбэках.
Условие и примеры целиком

Эталон, тесты и таймер открываются интервьюеру в живом моке

Рубрика оценки: 1-4 балла

Те же критерии процесса, что в живом моке Техпрогона. Ставьте балл по каждому пункту, сумма показывает картину лучше, чем «понравился или нет».

1 Не сделал2 После подсказки3 Сам, с пробелами4 Сам и уверенно

Уточнил условие

Ограничения, формат входа, что вернуть при пустом вводе

Привёл примеры до кода

Обычный случай и хотя бы один краевой

Проговорил алгоритм словами

До того как писать код

Назвал сложность

По времени и по памяти

Написал рабочий код

Тесты прошли

Сам проверил краевые случаи

Прогнал в голове пустой ввод, один элемент, дубликаты

Нашёл и исправил ошибку сам

Или ошибок не было с первого раза

Мок-собес без регистрации для интервьюера

Хотите проверить кандидата на задаче с эталоном и рубрикой? Так работает живой мок в Техпрогоне.

Кандидат готовится в Техпрогоне и на задаче открывает ступень «Живой мок».

Он присылает вам ссылку. Вы открываете её без регистрации.

У вас условие, эталон, рубрика, уточняющие вопросы и таймер.

Вы ставите оценки и вердикт, кандидат сразу видит результат.

Посмотреть механику изнутри

Для интервьюера бесплатно. Ссылку создаёт кандидат на тарифе Рывок

Наборы для других ролей

Backend на Node.jsFullstack на JS/TSBackend на PythonBackend на GoBackend на Java/KotlinBackend на C#/.NETBackend на PHPРазработчик C++iOS-разработчикAndroid-разработчикFlutter-разработчикReact NativeQA-инженер (ручное)QA-автоматизаторDevOps / SREAI-инженер (LLM-приложения)ML/LLM-инженерAI-продакт-менеджерData ScientistАналитик данныхData EngineerСистемный аналитикБизнес-аналитикПродакт-менеджерПроджект-менеджерТимлид / руководительСпециалист по безопасности приложенийРазработчик 1СUX/UI-дизайнер

Готовитесь к собесу сами? Подготовка к собеседованию: Frontend