Frontend-собеседование проверяет не только знание HTML, CSS и JavaScript. Хороший интервьюер смотрит, понимает ли кандидат браузерный рендеринг, асинхронность, состояние, безопасность, доступность и компромиссы архитектуры.
Ниже - 100 вопросов с краткими ответами. Вопросы разбиты на 5 уровней по 20 штук: от базовой верстки до подвохов, где заученные определения быстро перестают помогать.
Уровень 1. База HTML, CSS и JavaScript
- Чем HTML отличается от CSS и JavaScript?
HTML задает структуру страницы, CSS отвечает за внешний вид, JavaScript добавляет поведение и реакцию на действия пользователя.
- Что такое семантическая верстка?
Семантическая верстка использует теги по смыслу, а не только ради внешнего вида. Такая разметка помогает браузерам, поисковикам, скринридерам и другим разработчикам.
- Чем id отличается от class?
id должен быть уникальным на странице. class можно использовать много раз, поэтому для стилизации обычно выбирают class.
- Зачем изображению нужен alt?
alt описывает изображение для скринридеров и показывает смысл картинки, если файл не загрузился. Для декоративных изображений допустим пустой alt.
- Чем блочный элемент отличается от строчного?
Блочный элемент обычно занимает всю доступную ширину и начинается с новой строки. Строчный элемент занимает только место по содержимому.
- Как работает каскад CSS?
Браузер выбирает итоговое правило по источнику стилей, специфичности селектора и порядку объявления. При равной силе побеждает правило, объявленное позже.
- Что такое специфичность селектора?
Специфичность показывает силу CSS-селектора. id сильнее class, class сильнее тега, а inline-стили обычно сильнее правил из файла.
- Чем margin отличается от padding?
padding добавляет внутренний отступ между контентом и рамкой элемента. margin добавляет внешний отступ между элементом и соседями.
- Что меняет box-sizing: border-box?
Ширина элемента начинает включать контент, padding и border. Верстку проще контролировать, потому что блок не выходит за заданный размер из-за внутренних отступов.
- Чем display: none отличается от visibility: hidden?
display: none убирает элемент из потока документа. visibility: hidden скрывает элемент, но оставляет занимаемое место.
- Как работает position: absolute?
Элемент выпадает из обычного потока и позиционируется относительно ближайшего предка с заданным position. Если такого предка нет, ориентиром становится документ.
- Для каких задач удобен Flexbox?
Flexbox удобен для выравнивания элементов в одном направлении: меню, кнопки, панели, строки карточек, элементы формы.
- Когда лучше выбрать CSS Grid?
CSS Grid лучше подходит для двумерных макетов, где нужно управлять строками и колонками одновременно: каталоги, дашборды, сложные сетки.
- Чем let, const и var отличаются?
let и const имеют блочную область видимости, var - функциональную. const запрещает переназначить переменную, но не делает объект неизменяемым.
- Какие типы данных есть в JavaScript?
К примитивам относятся string, number, boolean, null, undefined, symbol и bigint. Объекты, массивы и функции относятся к объектному типу данных.
- Чем массив отличается от объекта?
Массив хранит упорядоченный набор значений по индексам. Объект хранит пары ключ-значение и лучше подходит для описания сущностей.
- Чем == отличается от ===?
== сравнивает значения с приведением типов. === сравнивает без приведения, поэтому в рабочем коде почти всегда безопаснее.
- Чем function declaration отличается от function expression?
Function declaration можно вызвать до объявления из-за hoisting. Function expression ведет себя как значение переменной.
- Что такое DOM?
DOM - объектная модель HTML-документа. Через DOM JavaScript читает, создает, удаляет и меняет элементы страницы.
- Как повесить обработчик события на кнопку?
Обычно используют addEventListener. Такой способ гибче inline-обработчиков и позволяет добавлять несколько обработчиков на один элемент.
Уровень 2. Рабочий минимум для реальных задач
- Что такое область видимости?
Область видимости определяет, где переменная доступна. В JavaScript чаще всего важны глобальная, функциональная и блочная области.
- Как работает замыкание?
Функция запоминает переменные из внешней области, даже когда внешняя функция уже завершилась. На замыканиях строят счетчики, фабрики и приватное состояние.
- Что такое hoisting?
JavaScript заранее обрабатывает объявления в области видимости. Но let и const остаются недоступны до строки объявления.
- Что произойдет при обращении к let до объявления?
Код упадет с ReferenceError. Такая зона между началом области видимости и строкой объявления называется temporal dead zone.
- Как работает this в обычной функции?
this зависит от способа вызова функции. Один и тот же код может получить разный this при вызове как метода, отдельной функции или обработчика.
- Почему стрелочная функция иначе работает с this?
Стрелочная функция не создает собственный this, а берет значение из внешнего лексического окружения.
- Чем map отличается от forEach?
map возвращает новый массив с результатами преобразования. forEach просто выполняет действие для каждого элемента и не возвращает полезный результат.
- Чем filter отличается от reduce?
filter оставляет элементы по условию. reduce сводит массив к одному результату: числу, строке, объекту или новой структуре.
- Что такое промис?
Промис представляет результат асинхронной операции. Промис может ждать, выполниться успешно или завершиться ошибкой.
- Чем async и await удобнее then?
async и await позволяют писать асинхронный код в более линейном виде. Ошибки удобно ловить через try и catch.
- Как обработать ошибку в асинхронном коде?
В цепочке промисов используют catch. В async-функции обычно используют try и catch.
- Что такое event bubbling?
Событие сначала срабатывает на целевом элементе, затем поднимается вверх по дереву DOM к родителям.
- Что такое event capturing?
Capturing идет в обратную сторону: событие проходит от верхних элементов к целевому. В обычных интерфейсах bubbling встречается чаще.
- Что делает preventDefault?
Метод отменяет стандартное действие браузера: отправку формы, переход по ссылке, фокус или другое поведение по умолчанию.
- Что делает stopPropagation?
Метод останавливает дальнейшее распространение события по DOM-дереву. Использовать stopPropagation нужно осторожно, чтобы не сломать чужие обработчики.
- Как работает делегирование событий?
Обработчик ставят на родителя, а внутри проверяют цель события. Подход удобен для списков и динамически добавляемых элементов.
- Чем localStorage отличается от sessionStorage?
localStorage хранит данные после закрытия браузера. sessionStorage живет в рамках вкладки или сессии.
- Чем cookie отличаются от storage?
Cookie могут автоматически уходить на сервер с запросами. Storage остается на клиенте, пока код явно не прочитает данные.
- Что такое адаптивная верстка?
Адаптивная верстка подстраивает интерфейс под разные экраны. Обычно используют гибкие сетки, media query и относительные единицы.
- Зачем нужен package.json?
Файл описывает зависимости, команды проекта, версию и служебные настройки. Без package.json командная работа с фронтенд-проектом быстро становится хаотичной.
Уровень 3. Middle: браузер, React, TypeScript
- Как браузер строит страницу?
Браузер парсит HTML в DOM, CSS в CSSOM, строит render tree, считает layout, рисует элементы и композитит слои.
- Что такое critical rendering path?
Это цепочка шагов от загрузки ресурсов до первого отображения страницы. Чем короче путь, тем быстрее пользователь увидит полезный контент.
- Чем reflow отличается от repaint?
Reflow пересчитывает геометрию элементов. Repaint перерисовывает внешний вид без полного пересчета расположения.
- Почему layout-свойства в цикле могут тормозить?
Чередование чтения и записи размеров заставляет браузер часто пересчитывать layout. Такой эффект называют layout thrashing.
- Что такое event loop?
Event loop управляет очередями задач и позволяет JavaScript выполнять асинхронный код при однопоточном исполнении.
- Чем microtask отличается от macrotask?
Microtask выполняется раньше следующей macrotask. Поэтому Promise обычно выполнится раньше setTimeout с нулевой задержкой.
- В каком порядке выполнятся синхронный код, Promise.then и setTimeout?
Сначала выполнится синхронный код, затем microtask из Promise.then, потом macrotask из setTimeout.
- Что такое ES-модуль?
ES-модуль позволяет явно экспортировать и импортировать код между файлами. Такой код проще анализировать, собирать и оптимизировать.
- Чем named export отличается от default export?
Named export импортируют по имени. Default export может получить любое имя при импорте, что иногда ухудшает читаемость.
- Зачем фронтенду TypeScript?
TypeScript ловит часть ошибок до запуска, улучшает автодополнение и помогает поддерживать крупный код с явными контрактами.
- Чем interface отличается от type?
type умеет описывать объединения, пересечения и примитивные алиасы. interface удобен для объектных контрактов и может дополняться повторным объявлением.
- Что такое generic?
Generic позволяет описать тип, который зависит от входных данных. Например, функция может работать с разными типами и сохранять связь между входом и выходом.
- Какие проблемы решает React?
React помогает строить интерфейс как набор компонентов и декларативно описывать состояние. Разработчик описывает, что показать, а не вручную меняет DOM в каждом месте.
- Что такое Virtual DOM?
Virtual DOM - внутреннее представление пользовательского интерфейса. React сравнивает новое дерево со старым и решает, какие изменения применить к реальному DOM.
- Почему фраза «Virtual DOM всегда быстрее» неверна?
Virtual DOM не ускоряет любой интерфейс автоматически. Скорость зависит от структуры компонентов, объема данных, ререндеров и работы браузера.
- Зачем React нужен key в списках?
key помогает React сопоставлять элементы между рендерами. Плохой key может привести к лишним перерисовкам и ошибкам состояния.
- Чем controlled component отличается от uncontrolled?
Controlled component хранит значение в состоянии React. Uncontrolled component хранит значение в DOM, а React читает данные через ref или событие.
- Как работает useEffect?
useEffect запускает побочный эффект после рендера: запрос, подписку, синхронизацию с внешней системой. Для обычных вычислений эффект часто не нужен.
- Почему нельзя удалять зависимости из useEffect ради тишины линтера?
Удаленная зависимость может дать устаревшие данные и плавающие баги. Правильнее изменить структуру эффекта или вынести лишнюю логику.
- Когда Redux или другой менеджер состояния лишний?
Если состояние локальное и нужно одному-двум компонентам, глобальное хранилище усложнит код. Простое состояние лучше держать ближе к месту использования.
Уровень 4. Senior: архитектура, производительность, безопасность
Вопросы про XSS, CSRF, CSP и хранение токенов предназначены для легальной и ответственной разработки. Такие знания нельзя применять для взлома, слежки, несанкционированного доступа, нарушения правил сервисов или незаконного обхода ограничений. При работе с безопасностью нужно соблюдать законы своей страны, особенно России.
- Как спроектировать переиспользуемый компонент?
Компонент должен иметь понятный API, не знать лишнего о бизнес-логике и принимать данные через props или композицию.
- Чем контейнерный компонент отличается от презентационного?
Контейнер работает с данными и состоянием. Презентационный компонент отвечает за отображение и получает готовые данные на вход.
- Чем опасна чрезмерная декомпозиция?
Слишком много мелких компонентов усложняют навигацию по коду. Декомпозиция полезна, когда дает повторное использование или ясные границы ответственности.
- Как выбрать между Context, Redux, Zustand и локальным состоянием?
Выбор зависит от масштаба состояния, частоты обновлений, связности данных и требований к отладке. Один инструмент не должен закрывать все задачи.
- Что такое SSR?
Server-side rendering генерирует HTML на сервере. Пользователь быстрее получает первичную разметку, но проект получает серверную сложность.
- Чем SSR отличается от client-side rendering?
При SSR первый HTML приходит с сервера. При client-side rendering браузер получает контейнер и строит интерфейс после загрузки JavaScript.
- Чем SSR отличается от static generation?
SSR собирает страницу на запросе или близко к запросу. Static generation готовит HTML заранее во время сборки или обновления.
- Что такое React Server Components?
React Server Components позволяют выполнять часть компонентной логики на сервере и не отправлять этот код в клиентский бандл.
- Какие ограничения есть у Server Components?
Серверный компонент не работает с браузерными событиями и клиентским состоянием напрямую. Для интерактива нужны клиентские компоненты.
- Что такое hydration?
Hydration подключает клиентский JavaScript к HTML, который уже пришел с сервера. После hydration интерфейс становится интерактивным.
- Что такое hydration mismatch?
Hydration mismatch возникает, когда HTML с сервера не совпадает с первым клиентским рендером. Частые причины: дата, случайные числа, тема, данные пользователя.
- Как уменьшить размер JavaScript-бандла?
Помогают code splitting, удаление лишних зависимостей, tree shaking, lazy loading и анализ сборки через bundle analyzer.
- Что такое code splitting?
Code splitting делит приложение на чанки. Браузер загружает не весь код сразу, а только нужные части.
- Как работает lazy loading изображений?
Изображение загружается ближе к появлению в зоне просмотра. Такой подход снижает стартовую нагрузку страницы.
- Какие метрики входят в Core Web Vitals?
Ключевые метрики: LCP для загрузки основного контента, INP для отклика интерфейса, CLS для стабильности макета.
- Как найти причину плохого LCP?
Нужно проверить главный LCP-элемент, размер изображения, серверный ответ, блокирующие стили, шрифты и приоритет загрузки ресурсов.
- Почему hero-картинка часто портит производительность?
Большое изображение в первом экране часто становится LCP-элементом. Без оптимизации размера, формата и preload страница кажется медленной.
- Что такое XSS?
XSS позволяет выполнить чужой скрипт в контексте страницы. Риск растет при вставке пользовательского HTML без очистки и экранирования.
- Как работает CSRF-защита?
CSRF-защита мешает чужому сайту выполнить действие от имени пользователя. Используют SameSite cookie, CSRF-токены и проверку происхождения запроса.
- Зачем нужны CSP-заголовки?
CSP ограничивает источники скриптов, стилей и других ресурсов. CSP снижает ущерб от XSS, но не заменяет очистку данных.
Уровень 5. Вопросы с подвохом
- Почему typeof null возвращает object?
Это историческая ошибка JavaScript, сохраненная ради совместимости. null не является объектом по смыслу.
- Почему 0.1 + 0.2 не равно точно 0.3?
Дробные числа хранятся в двоичном формате с ограниченной точностью. Некоторые десятичные дроби нельзя представить точно.
- Что выведет var в цикле с setTimeout?
Часто все таймеры увидят одно финальное значение переменной. var имеет функциональную область видимости, а не блочную.
- Почему индекс массива часто плохой key в React?
При вставке, удалении или сортировке индекс меняется. React может связать состояние не с тем элементом.
- Почему useMemo не стоит ставить везде?
useMemo тоже имеет стоимость: хранение, сравнение зависимостей и усложнение кода. Мемоизация нужна там, где есть измеримая польза.
- Почему React.memo иногда замедляет приложение?
React.memo сравнивает props. Если сравнение дорогое или props постоянно новые, выгоды не будет.
- Почему состояние после setter-функции не меняется сразу?
React планирует обновление состояния и может объединять несколько изменений. Новое значение надежнее читать после следующего рендера или через функциональный setter.
- Как найти лишние ререндеры?
Используют React DevTools Profiler, логирование рендера и проверку стабильности props. Частая причина - новые объекты и функции на каждом рендере.
- Почему debounce может сломать UX?
Слишком большая задержка делает интерфейс вялым. Для поиска debounce полезен, а для drag, resize и мгновенного ввода может мешать.
- Когда throttling лучше debounce?
Throttling подходит, когда событие должно срабатывать регулярно, но не слишком часто: скролл, resize, движение указателя.
- Почему бесконечный скролл хуже пагинации?
Бесконечный скролл усложняет доступность, возврат к месту, индексацию, футер и контроль количества просмотренных элементов.
- Почему z-index: 9999 не всегда работает?
Элемент может находиться внутри другого stacking context. Тогда большой z-index не выведет элемент выше соседних контекстов.
- Как stacking context ломает модальное окно?
Если модалка вложена в контейнер с transform, opacity или другим свойством, новый stacking context может ограничить ее слой.
- Почему position: sticky может не работать?
Частые причины: родитель с overflow, неверная высота контейнера, отсутствие top или неподходящий контекст прокрутки.
- Почему transform лучше top и left для анимации?
transform чаще обрабатывается на этапе композиции и меньше трогает layout. top и left могут вызывать пересчет расположения.
- Почему нельзя доверять данным с фронтенда?
Пользователь может изменить запрос, состояние, форму и JavaScript-код. Сервер обязан проверять права, формат и бизнес-правила сам.
- Почему клиентская валидация не заменяет серверную?
Клиентская валидация улучшает UX, но легко обходится. Серверная проверка защищает данные и бизнес-логику.
- Почему не стоит начинать новый React-проект с Create React App?
Create React App считают устаревшим стартовым подходом. Для новых проектов чаще выбирают Vite, Next.js, Remix или другой актуальный инструмент под задачу.
- Как отличить проблему сети, API, рендера и состояния?
Нужно идти по цепочке: Network, ответ API, преобразование данных, состояние, рендер компонента. Гипотезы лучше проверять по одной.
- Как объяснить сложное фронтенд-решение дизайнеру, менеджеру и backend-разработчику?
Дизайнеру говорят о поведении интерфейса, менеджеру - о рисках и сроках, backend-разработчику - о контрактах, данных и ошибках API.
Как использовать этот список
Не задавайте все 100 вопросов подряд. Такое интервью превращается в экзамен и плохо показывает реальный уровень. Лучше выбрать 5-7 вопросов из нужного уровня, попросить кандидата объяснить ход мысли и дать маленькую практическую задачу.
| Уровень | Что проверяет | Красный флаг |
|---|---|---|
| 1 | Базовую грамотность | Кандидат путает HTML, CSS, DOM и JavaScript |
| 2 | Готовность к типовым задачам | Кандидат знает термин, но не может привести пример |
| 3 | Понимание браузера, React и TypeScript | Кандидат отвечает лозунгами без механики |
| 4 | Архитектуру, скорость и безопасность | Кандидат предлагает один инструмент для всех задач |
| 5 | Инженерное мышление | Кандидат угадывает вместо проверки гипотез |
Junior обычно должен уверенно закрывать первый уровень и часть второго. Middle должен понимать второй уровень, большую часть третьего и не теряться в DevTools. Senior обязан спокойно говорить про архитектуру, безопасность, производительность, SSR, hydration, состояние и компромиссы.
Главная ошибка подготовки - учить ответы как билеты. На реальном собеседовании важнее показать механизм: почему код ведет себя так, как проверить гипотезу, где решение даст побочный эффект и когда модный инструмент только усложнит проект.
