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

В исходном материале собраны 13 вопросов, которые автор связывает с Frontend-собеседованием в компании Airflow. Также сообщается об оффере на 220 тысяч рублей после налогов. Полного диалога и ответов кандидата в записи нет: это компактная подборка вопросов с подготовленными объяснениями. Мы проверили их и собрали самостоятельный разбор без личных данных участников.

Git: Pull, Merge и Push

Вопрос: чем отличаются git pull, git merge и git push?

git pull сначала получает изменения из удалённого репозитория, а затем интегрирует их в текущую ветку. Способ интеграции зависит от команды и настроек: это может быть merge или rebase. Поэтому точнее говорить не «pull скачивает ветку», а «получает и объединяет изменения».

git merge соединяет истории разработки. Если ветки разошлись, Git может создать merge-коммит. git push отправляет локальные объекты и обновляет ссылки в удалённом репозитории. До push полезно убедиться, что локальная ветка основана на актуальном состоянии удалённой. Подробная последовательность описана в документации git pull.

На интервью приведите рабочий сценарий: получили изменения коллег, разрешили конфликт, прогнали проверки и только затем опубликовали свою ветку.

this, сборщик мусора и глубокая копия

Вопрос: как работают this, call, apply и bind?

Для обычной функции значение this в основном задаёт способ вызова. call вызывает функцию сразу и принимает аргументы по одному, apply тоже вызывает сразу, но получает аргументы как массивоподобный объект. bind возвращает новую функцию с закреплённым this и, при необходимости, частью аргументов. У стрелочной функции собственного this нет: она берёт его из внешней области. Это важное исключение разобрано в справочнике MDN.

Вопрос: как работает сборщик мусора?

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

Вопрос: как сделать глубокую копию?

Для совместимых данных используйте structuredClone. Он умеет работать с циклами и многими встроенными типами, но не клонирует функции и DOM-узлы и может выбросить исключение. Связка JSON.stringify и JSON.parse теряет часть типов и не поддерживает циклические ссылки. Ограничения перечислены в документации structuredClone.

React: key, формы, Context и Redux

Вопрос: зачем элементам списка нужен key?

Стабильный key помогает React сопоставить элемент данных с уже созданным компонентом. Индекс массива опасен, когда список сортируют, фильтруют, удаляют или дополняют: один и тот же индекс начинает обозначать другой объект, из-за чего локальное состояние может «переехать». Случайный ключ ещё хуже — компоненты будут создаваться заново. React рекомендует брать устойчивый идентификатор из данных.

Вопрос: зачем React Hook Form?

Библиотека управляет регистрацией полей, валидацией и ошибками, используя подписки и неконтролируемые элементы там, где это уместно. Это помогает ограничить лишние обновления в больших формах. Но ответ «обычная форма всегда перерисовывается целиком» слишком грубый: производительность зависит от структуры компонентов и состояния.

Вопрос: Context или Redux?

Context удобно передаёт общие данные без цепочки props. Компоненты, которые читают изменившийся контекст, обновятся при новом значении провайдера. Redux добавляет отдельное хранилище, предсказуемые обновления, инструменты отладки и выборочные подписки через селекторы. Для темы или локали Context обычно достаточно; для большого часто меняющегося состояния Redux может дать более ясную систему. Главное — обосновать выбор, а не объявить один инструмент универсальным.

SSR и статический рендеринг в Next.js

Вопрос: что такое SSR и зачем он нужен?

При серверном рендеринге HTML формируется на сервере для запроса. Браузер получает содержимое раньше, а затем JavaScript делает страницу интерактивной. Это полезно для персонализированных или часто меняющихся данных, но увеличивает работу сервера и может замедлить ответ, если запросы к данным тяжёлые.

Статический рендеринг готовит результат заранее — во время сборки или повторной генерации. Он подходит страницам, где данные общие для пользователей и меняются не каждую секунду. В официальном курсе Next.js сравнивает оба подхода через свежесть данных и момент построения страницы.

SSR может упростить получение исходного содержимого поисковыми роботами и улучшить первый показ, но сам по себе не гарантирует позиции. На собеседовании лучше обсуждать данные, кеширование и стоимость ответа, а не сводить выбор только к SEO.

Микрофронтенды, Module Federation и FSD

Вопрос: что такое микрофронтенды и Module Federation?

Микрофронтендная архитектура делит большой интерфейс на части, за которые могут независимо отвечать разные команды. Независимость требует контрактов, общей стратегии дизайна, наблюдаемости и выпуска. Само разбиение не гарантирует, что сбой одной части никогда не затронет остальные.

Module Federation в webpack позволяет одной сборке предоставлять модули, а другой — загружать их во время выполнения. Это один из способов собрать микрофронтенды, но не обязательное определение подхода.

Вопрос: что такое Feature-Sliced Design?

FSD организует фронтенд по слоям и бизнес-смыслу. В актуальном обзоре Feature-Sliced Design описаны слои app, pages, widgets, features, entities и shared; часть из них необязательна. Основное правило импорта направлено вниз по слоям. FSD помогает держать границы внутри приложения, а микрофронтенды решают более крупную задачу разделения системы и команд.

WebSocket, SSE и polling

Вопрос: чем WebSocket отличается от Server-Sent Events?

WebSocket создаёт двусторонний канал: и браузер, и сервер могут отправлять сообщения. Он подходит чатам, совместному редактированию и частому обмену событиями. SSE работает поверх HTTP и передаёт события от сервера к браузеру в формате text/event-stream; браузерный EventSource умеет переподключаться. SSE удобен для ленты уведомлений или прогресса операции, когда обратные команды можно отправлять обычными HTTP-запросами.

Вопрос: как работают polling и long polling?

При обычном polling клиент через интервал спрашивает о новых данных. Решение простое, но создаёт пустые запросы и задержку до следующего интервала. При long polling сервер держит запрос открытым до появления события или тайм-аута, после чего клиент сразу создаёт новый. Это снижает задержку, но усложняет работу соединений. Выбор нужно связывать с частотой событий, направлением обмена, прокси и инфраструктурой.

Event Loop и порядок выполнения

Вопрос: в каком порядке выполнятся синхронный код, Promise и setTimeout?

Сначала выполняется текущая задача — весь синхронный код. Затем среда очищает очередь микрозадач, куда попадают обработчики Promise. Только после этого она может перейти к следующей задаче, например callback таймера. Между задачами браузер получает возможность обновить отображение.

console.log('1: синхронно');

setTimeout(() => {
  // Таймер ставит callback в очередь следующих задач.
  console.log('4: задача таймера');
}, 0);

Promise.resolve().then(() => {
  // Promise добавляет обработчик в очередь микрозадач.
  console.log('3: микрозадача');
});

// Текущая задача завершится только после этой строки.
console.log('2: синхронно');

Порядок будет 1, 2, 3, 4. Нулевой тайм-аут не означает немедленный вызов: callback ждёт завершения текущей задачи и микрозадач. На реальном интервью полезно проговорить каждую очередь, а не просто назвать результат.

Получил ли кандидат оффер

Источник сообщает, что собеседование закончилось оффером на 220 тысяч рублей после налогов. Это известный факт только со слов автора материала: полной записи ответов кандидата и решения работодателя нет.

Наша редакционная оценка самого выступления — данных недостаточно. По набору тем видно широкую проверку JavaScript, React, сети и архитектуры, близкую к ожиданиям от самостоятельного Frontend-разработчика. Но готовые ответы из подборки нельзя приписывать кандидату.

Для подготовки мы советуем отвечать по схеме «механизм → ограничение → пример выбора» и обязательно проговаривать код. В тренажёре собеседований ЮНИКОД можно проверить знания по своему направлению и превратить ошибки в конкретный план повторения.

Источники

• Git: git pull — получение и интеграция изменений.
• MDN: this и structuredClone — модель вызова функций и копирование данных.
• React: Rendering Lists и useContext — стабильные ключи и обновление потребителей контекста.
• Next.js: Static and Dynamic Rendering — выбор момента рендеринга.
• webpack: Module Federation и Feature-Sliced Design: Overview — границы модулей и слоёв.
• MDN: WebSocket и Server-Sent Events — транспорт для событий в браузере.