Перейти к основному содержимому

Фронтенд собеседование: реальные вопросы с ответами

Здесь собраны расшифровки настоящих собеседований на фронтенд-разработчика — не подборка вопросов из чужой статьи, а то, что спрашивали живые интервьюеры, вместе с ответами кандидатов и оценкой этих ответов.

Каждый разбор построен одинаково: вопрос, таймкод на момент в видео, ответ кандидата с пометкой «правильный» или «неправильный» и корректный ответ там, где кандидат ошибся. Готовиться по чужим ошибкам эффективнее, чем по идеальным формулировкам из шпаргалок.

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

Всего разборов в этом разделе: 71. Каждый — расшифровка реального интервью с таймкодами: видно и вопрос интервьюера, и ответ кандидата, и оценку этого ответа.

По грейдам

Один и тот же вопрос на разных грейдах закрывается по-разному. Ориентируйтесь на позицию, на которую идёте:

Junior — 19 разборов

Проверяют базу языка и умение рассуждать вслух. Незнание частностей прощают, отсутствие структуры в ответе — нет.

Все разборы уровня Junior →

Middle — 27 разборов

Спрашивают, как поведёт себя код в проде: гонки, отказы сети, нагрузка. Ждут примеров из реального опыта, а не пересказа документации.

Все разборы уровня Middle →

Senior — 15 разборов

Основной вес — проектирование и обоснование решений. Разбирают компромиссы, стоимость поддержки и то, как вы вели чужие изменения.

Все разборы уровня Senior →

По темам

JavaScript: замыкания, прототипы, event loop — 20 разборов

Ядро любого фронтенд-собеседования. Спрашивают не определения, а поведение конкретного куска кода: что выведет цикл с var и setTimeout, почему this меняется при передаче метода в колбэк, в каком порядке отработают промисы и таймеры. По прототипам — цепочка поиска свойства, отличие __proto__ от prototype, что делает new. По event loop — микро- и макрозадачи, почему await не блокирует поток. На этих вопросах кандидаты чаще всего сыпятся не от незнания, а от неумения рассуждать по шагам.

React: хуки, рендер и состояние — 23 разборов

Основная секция для React-позиций. Разбирают, когда компонент перерисовывается и почему memo не помог, зачем нужен массив зависимостей useEffect и что ломается при его отсутствии, чем useMemo отличается от useCallback по смыслу, а не по сигнатуре. Дальше идут ключи в списках и последствия использования индекса, подъём состояния, контекст против внешнего стора. На middle+ спрашивают про батчинг обновлений, Suspense и работу с гонками при загрузке данных.

TypeScript и типизация — 1 разборов

Секция, которая быстро показывает глубину. Просят типизировать функцию с перегрузками, объяснить разницу между type и interface и когда она реально важна, разобрать дженерик с ограничением через extends. Дальше — utility types, вывод типов и почему any в одном месте отравляет цепочку, сужение типов через type guard. На senior добавляют условные типы и то, зачем нужен strict-режим в существующем проекте.

Вёрстка, CSS и работа браузера — 5 разборов

Блок, который часто недооценивают. Спрашивают про блочную модель и box-sizing, отличие flex от grid и когда какой выбирать, схлопывание отступов, специфичность селекторов и позиционирование. По браузеру — как строится DOM и CSSOM, что такое reflow и repaint, почему анимировать transform дешевле, чем top. Отдельная тема — семантика и доступность: какие теги выбрать и что это даёт скринридеру.

Live-coding и задачи — 10 разборов

Практическая секция: пишете код, интервьюер смотрит. Типичные задания — реализовать debounce или throttle, написать глубокое копирование объекта, сгруппировать массив, собрать небольшой компонент с загрузкой данных и состояниями загрузки и ошибки. Оценивают проговаривание плана, обработку краевых случаев и то, как вы принимаете подсказку. В разборах видно момент, где кандидат замолкает и теряет контакт с интервьюером.

Сеть, сборка и производительность — 6 разборов

Что спрашивают на middle и выше. По сети — HTTP-кэширование, CORS, отличие REST от GraphQL, где хранить токен и почему localStorage — плохая идея. По сборке — что делает бандлер, зачем code splitting и tree shaking, как читать отчёт по размеру бандла. По производительности — Core Web Vitals, ленивая загрузка изображений, виртуализация длинных списков, отличие SSR от CSR и когда SSR не нужен.

Полные разборы интервью

Все разборы

Полный список разборов (71) →