Вопросы на собеседовании Frontend-разработчика: разбор с ответами

Собеседование на Frontend-разработчика обычно идёт по трём блокам: вёрстка (HTML/CSS), «чистый» JavaScript и фреймворк (чаще всего React). Ниже — вопросы, которые реально задают на HH-вакансиях в 2026 году, с короткими ответами для быстрой подготовки. В конце — как получать больше приглашений на собеседования.

HTML и CSS

Что такое семантическая вёрстка? Использование тегов по смыслу: header, nav, main, article, section, footer вместо сплошных div. Это улучшает доступность (скринридеры), SEO и читаемость разметки.

Что такое box model? Модель коробки: контент окружён padding, затем border, затем margin. По умолчанию ширина считается без padding и border; box-sizing: border-box включает их в заданную ширину — так удобнее верстать.

Чем flexbox отличается от grid? Flexbox — одномерная раскладка (строка или колонка), хорош для выравнивания элементов по одной оси. Grid — двумерная (строки и колонки одновременно), для сеток и сложных макетов.

Как работает специфичность селекторов? Чем «весомее» селектор, тем он приоритетнее: inline-стиль > id > класс/атрибут/псевдокласс > тег. !important перебивает обычные правила, но злоупотреблять им — антипаттерн.

Какие бывают значения position? static (по умолчанию), relative (смещение относительно себя), absolute (относительно ближайшего позиционированного предка), fixed (относительно окна), sticky (прилипает при прокрутке).

JavaScript

Какие типы данных есть в JavaScript? Примитивы: string, number, bigint, boolean, undefined, null, symbol — и объекты (object, включая массивы и функции). Исторический нюанс: typeof null === 'object'.

Чем == отличается от ===? == сравнивает с приведением типов (1 == '1' истинно), === — без приведения, и значение, и тип. На практике используют ===.

Что такое замыкание (closure)? Функция вместе с её лексическим окружением: она сохраняет доступ к переменным внешней функции даже после её завершения. На замыканиях строят приватные переменные, счётчики, debounce и throttle.

Что такое hoisting? Подъём объявлений в начало области видимости. Объявления var инициализируются как undefined, а let/const попадают во «временную мёртвую зону» (TDZ) и до объявления недоступны.

В чём разница между var, let и const? var — функциональная область видимости и hoisting. let и const — блочная область и TDZ. const запрещает переприсваивание переменной, но сам объект, на который она ссылается, остаётся изменяемым.

Как определяется this? В обычной функции this зависит от способа вызова (кто вызвал). В стрелочной функции this лексический — берётся из окружения, где функция объявлена, и не меняется.

Как работает прототипное наследование? У объектов есть ссылка на прототип ([[Prototype]]). Если свойства нет в самом объекте, движок ищет его в прототипе и дальше по цепочке прототипов до null.

Что такое event loop? Механизм, благодаря которому однопоточный JS выполняет асинхронный код. Когда стек вызовов пуст, сначала выполняются все микрозадачи (промисы), затем одна макрозадача (setTimeout, события), и цикл повторяется.

Что такое Promise и async/await? Promise — объект, представляющий будущий результат асинхронной операции (pending → fulfilled/rejected). async/await — синтаксис поверх промисов: await приостанавливает функцию до разрешения промиса, делая асинхронный код похожим на синхронный.

Зачем нужны debounce и throttle? Это приёмы ограничения частоты вызовов. debounce откладывает вызов до паузы в событиях (поиск по вводу), throttle пропускает не чаще раза в интервал (обработка scroll/resize).

React

Что такое виртуальный DOM? Лёгкое представление реального DOM в виде объектов. При изменении состояния React строит новое дерево, сравнивает со старым (реконсиляция) и применяет к реальному DOM только точечные изменения.

Какие правила у хуков? Хуки вызывают только на верхнем уровне компонента (не в условиях и циклах) и только из React-компонентов или других хуков. Это нужно, чтобы React сопоставлял состояние по порядку вызова.

Зачем массив зависимостей в useEffect? Он задаёт, когда перезапускать эффект: [] — один раз после монтирования, [a, b] — при изменении a или b, без массива — после каждого рендера. Возвращаемая из эффекта функция делает очистку перед следующим запуском и при размонтировании.

Зачем нужны ключи (key) в списках? Ключи дают элементам стабильную идентичность, чтобы React при реконсиляции понимал, что изменилось. Индекс массива как ключ — плохая идея, если список меняет порядок или длину.

Чем controlled-компонент отличается от uncontrolled? В controlled значение поля хранится в состоянии React и управляется через value + onChange. В uncontrolled значение живёт в самом DOM и читается через ref.

Зачем нужны React.memo, useMemo, useCallback? Чтобы избегать лишних ререндеров и пересчётов. React.memo мемоизирует компонент, useMemo — результат вычисления, useCallback — ссылку на функцию. Применять точечно, где перерисовки реально дорогие.

Что спрашивают на разных грейдах

• Junior — HTML/CSS, основы JavaScript (типы, функции, события), базовый React, умение сверстать макет и собрать простой компонент.
• Middle — управление состоянием, оптимизация ререндеров, TypeScript, тестирование, работа с API, понимание сборки (Vite/webpack).
• Senior — архитектура приложения, доступность (a11y), производительность и метрики (Core Web Vitals), дизайн-система, ревью и менторинг.

Как получать больше приглашений на собеседования

Готовиться к вопросам важно, но без приглашений подготовка простаивает. На одну Frontend-вакансию на HH приходит сотня и больше откликов, и рекрутёр смотрит первые из них. Чтобы попадать в эти первые:

1. Сделайте резюме видимым в поиске HH — иначе работодатели не находят вас сами. Разбор в статьях «Прожарка резюме под алгоритмы HH.ru» и «Ключевые слова в резюме».
2. Откликайтесь первыми на свежие вакансии. Скорость важнее объёма — как автоматизировать отклики и не потерять качество писем, описано в разборе «Автоотклик на HH.ru в 2026».

JobTurbo делает и то, и другое: переписывает резюме под алгоритмы HH и сам откликается на подходящие вакансии с персональным AI-сопроводительным под каждую. Первые отклики — бесплатно, без карты. А время освобождается на подготовку к собеседованиям, на которые вас уже позвали.