SprintCode.pro

Подготовка к алгоритмическим задачам

Super

На что смотрят на собеседовании frontend-разработчика

12 мин чтения
собеседование
frontend
карьера

Коротко

Что оцениваютВес для juniorВес для middleВес для senior
Знание JavaScriptвысокийвысокийсредний
Знание фреймворкасреднийвысокийвысокий
Вёрстка и CSSвысокийсреднийнизкий
Алгоритмынизкийсреднийсредний
Архитектурасреднийвысокий
Коммуникациясреднийвысокийвысокий

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

Как обычно устроен процесс

Скрининг с рекрутером — 30 минут. Опыт, стек, ожидания по зарплате.

Техническое интервью — 1–1.5 часа. Вопросы по JavaScript, фреймворку, вёрстке. Иногда небольшая задача.

Практическая секция — live coding или тестовое задание. Компонент, работа с API, отладка чужого кода.

Секция с командой или руководителем — опыт, мотивация, поведенческие вопросы.

Алгоритмическая секция во фронтенде встречается реже, чем в бэкенде, но в крупных компаниях она есть.

Что проверяют на самом деле

1. Понимание, а не заучивание

Разница видна мгновенно.

Заученный ответ: «Замыкание — это функция, которая имеет доступ к внешней области видимости».

Понимание: «Замыкание позволяет сохранить состояние между вызовами. Мы использовали его для дебаунса поиска, чтобы таймер жил между нажатиями клавиш».

Второй ответ показывает, что вы не просто читали, а применяли.

2. Умение объяснять

Фронтендер постоянно общается с дизайнерами, продуктом и бэкендом. Умение объяснить техническое решение нетехническому человеку — рабочий навык.

Вопрос «почему этот рефакторинг займёт неделю» задают именно для этого.

3. Отношение к качеству

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

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

Пройди собеседование в топ-компанию
Платформа для подготовки

Решай алгоритмические задачи как профи

✓ Популярные алгоритмы✓ Разбор решений✓ AI помощь
Начать сейчас
Программист за работой

4. Как вы решаете проблемы

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

Чего ждут по уровням

Junior

Обязательно: уверенный JavaScript (типы, замыкания, this, промисы), базовый фреймворк, вёрстка с флексбоксом и гридом, понимание HTTP и работы с API, git.

Хорошо бы: понимание event loop, основы адаптивности, немного про доступность.

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

Чаще всего проваливают: this и контекст, асинхронность, вопросы «что выведет».

Middle

Обязательно: всё вышеперечисленное плюс глубокое знание фреймворка (жизненный цикл, реактивность, управление состоянием), понимание производительности (перерисовки, мемоизация, ленивая загрузка), тестирование, работа со сборщиком.

Ждут самостоятельности: вы можете взять задачу и довести до продакшена без пошагового руководства.

Чаще всего проваливают: вопросы про оптимизацию рендеринга и про то, почему фреймворк работает так, а не иначе.

Senior

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

Ждут решений, а не знаний. Вопрос «как бы вы спроектировали интерфейс с 10 тысячами строк в таблице» важнее вопроса про синтаксис.

Чаще всего проваливают: обоснование компромиссов. Сказать «взял React, потому что он популярный» на этом уровне недостаточно.

Типичные вопросы по блокам

JavaScript: замыкания, this, прототипы, event loop, промисы, var против let, всплытие.

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

Вёрстка: флексбокс против грида, схлопывание отступов, позиционирование, специфичность селекторов, адаптивность, доступность.

Сеть: как работает HTTP, что такое CORS, кэширование, разница между REST и GraphQL, что происходит при вводе URL в браузере.

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

Инструменты: git, сборщик, линтеры, CI.

Что производит хорошее впечатление

Уточняющие вопросы. «Какая нагрузка ожидается? Сколько данных в таблице?» — до того, как предлагать решение.

Признание незнания. «С WebRTC не работал, но по описанию задачи я бы начал с...» — гораздо сильнее выдумывания.

Конкретика из опыта. Не «оптимизировал производительность», а «время до интерактивности упало с 4 секунд до 1.2 за счёт разделения бандла и ленивых маршрутов».

Вопросы про команду и процессы. Показывают, что вы выбираете работу, а не просто ищете любую.

Что портит впечатление

Критика прошлых работодателей. Даже обоснованная. Интервьюер примеряет ситуацию на себя.

Заученные определения без понимания. Раскрывается первым же уточняющим вопросом.

Выдуманный опыт. Проверяется одним вопросом «а как именно вы это делали».

Отсутствие мнения. «Мне всё равно, на чём писать» звучит как безразличие к работе.

Спор ради спора. Отстаивать позицию нормально, игнорировать аргументы — нет.

Как готовиться

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

Подготовьте три истории: сложный баг, техническое решение, которым гордитесь, и конфликт или сложная ситуация в команде.

Проговорите вслух ответы на базовые вопросы. Разница между «понимаю» и «могу объяснить» обнаруживается только при попытке сказать.

Освежите фундамент. Даже опытные фронтендеры плавают в this и event loop, потому что в повседневной работе это редко всплывает явно.

Посмотрите вакансию внимательно. Стек оттуда — это и есть список тем, которые спросят.

Что запомнить

  • Чем выше позиция, тем меньше спрашивают синтаксис и больше — обоснование решений.
  • Junior проваливают на this и асинхронности, middle — на производительности, senior — на компромиссах.
  • Конкретные цифры из опыта весят больше общих слов.
  • Уточняющие вопросы и честное «не знаю, но подошёл бы так» работают в плюс.
  • Стек из описания вакансии — это и есть план подготовки.