Мок-интервью для frontend-разработчика — тренировка с AI

Frontend-интервью одновременно проверяют две вещи: умеете ли вы выкатывать UI и понимаете ли, что на самом деле происходит, когда браузер рендерит страницу. Вопросы, решающие судьбу офера, обычно лежат на стыке: «почему это медленно?», «почему это недоступно?», «почему это состояние не обновляется?». Это руководство показывает, как использовать AI-моки, чтобы прорабатывать ответы, пока они не станут автоматическими.

Как устроено современное frontend-интервью

Типичный frontend-цикл состоит из четырёх этапов: скрининг-звонок с рекрутером, технический скрининг (45–60 минут, один инженер расспрашивает о вашем стеке и опыте выкатки), домашнее задание или живое программирование, и финальный цикл — очный или удалённый — из 3–5 раундов (программирование, system design для UI, behavioral, иногда разбор дизайна). Senior-циклы добавляют архитектурный раунд, где вам нужно защитить UI-систему от того, кто пытается её сломать.

AI-моки помогают больше всего с техническим скринингом и раундом по system design для UI. Оба — в основном разговор. Задачи по программированию стоит тренировать в настоящем редакторе: AI-моки плохо дают петлю обратной связи «а это вообще запустилось?». Для раундов интервью, где ответ — это абзацы («опишите, как React реконсилирует список» или «проведите меня через ускорение этой страницы»), AI-моки воспроизводят формат почти идеально.

JavaScript и TypeScript: что интервьюеры реально прощупывают

Классические вопросы по JS до сих пор всплывают, потому что до сих пор работают как фильтры. Замыкания, hoisting, привязка this, event loop, микро- против макрозадач, промисы против async/await, разница между == и === — все это разумные ожидания. Но интересные вопросы лежат на слой глубже. Не «что такое замыкание», а «почему этот setTimeout внутри цикла for логирует неправильное число и как это исправить тремя разными способами?».

Вопросы по TypeScript, на которые вы должны уметь отвечать

• Разница между interface и type и когда что уместно.
• Что даёт unknown, чего не даёт any.
• Как размеченные объединения (discriminated unions) сужают типы на практике.
• Когда дженерики помогают, а когда делают код нечитаемым.
• Что делает as const и зачем к нему прибегать.

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

React и Vue: вопросы уровня фреймворка

React

Ждите реконсиляцию, правила хуков, что вызывает повторный рендер, почему useEffect с неправильным массивом зависимостей всё ломает, чем useMemo отличается от useCallback на практике, когда поднимать состояние, а когда располагать его рядом, серверные компоненты против клиентских, если собеседуетесь на Next.js-роль. Самый частый провал: кандидаты объясняют правила хуков, но не могут сказать, зачем эти правила существуют. Причина в том, что React использует порядок вызовов, чтобы связать вызовы хуков с состоянием — нарушите порядок, нарушите связь.

Senior-уровневые вопросы по React уходят в производительность и архитектуру. Как сделать список из 10 000 элементов прокручиваемым без потери кадров? Когда виртуализация помогает, а когда вредит? Как измерить, реально ли мемоизация помогает или просто добавляет накладные расходы? AI-мок задаст уточняющий вопрос — если вы скажете «я бы использовал виртуализацию», ждите «с какой библиотекой, почему именно этой и чего это вам стоит?».

Vue

Темы, специфичные для Vue 3: composition API против options API, когда ломается реактивность (присваивание по индексу, замена всего массива), ref против reactive, чем реактивность на основе прокси отличается от реактивности React. Vue-интервьюеры обожают спрашивать про подводные камни реактивности, потому что модель более «магическая», чем у React, а у магических моделей больше острых углов.

Внутреннее устройство браузера, производительность, доступность

Внутреннее устройство браузера

DOM — это дерево, CSSOM — дерево, render tree — это то, что вы реально отрисовываете. Инвалидация стилей, layout (reflow), paint, composite — знайте конвейер и что запускает каждый этап. Надёжный вопрос на интервью: «почему анимировать top плохо, а анимировать transform хорошо?». Ответ: transform пропускает layout и paint, выполняется на потоке композитора.

Производительность

Core Web Vitals важны всем, кто держит публичный сайт. LCP, INP (заменил FID в начале 2024 года), CLS — будьте готовы дать определение каждой метрике, сказать, с каким поведением пользователя она коррелирует, и назвать один-два способа улучшить каждую. Разбиение бандла, ленивая загрузка маршрутов, выбор формата изображений (AVIF/WebP), fetchpriority, подсказки ресурсов (preload, preconnect, dns-prefetch). Если вы когда-либо выкатывали улучшение производительности и у вас есть метрика «до/после» — начинайте с неё.

Доступность

Порядок навигации с клавиатуры, ловушки фокуса для модальных окон, ARIA-роли против семантического HTML (предпочитайте семантику), коэффициенты контраста цвета (4,5:1 для основного текста, 3:1 для крупного), поведение скринридера с динамическим контентом (aria-live), доступные имена для кнопок только с иконками. Частый вопрос с подвохом: «доступен ли div с onclick?» — ответ нет, нужны tabindex, обработчики клавиатуры и роль, либо просто используйте button.

Behavioral-раунды: не недооценивайте их

Frontend-кандидаты регулярно теряют оферы в behavioral-раунде, потому что воспринимают его как светскую беседу. Это не так. Ждите: историю о сложном техническом решении, историю о кросс-функциональном конфликте (дизайнер против инженера — каноническая frontend-ситуация), историю о выкатке чего-то в сжатые сроки, историю о продакшен-инциденте. Держите наготове три-четыре истории, которые можно адаптировать, — в формате STAR (Situation, Task, Action, Result), где Result — это метрика или конкретный итог.

Одна специфичная frontend-ловушка: когда спрашивают «расскажите о трудном техническом решении», кандидаты часто выбирают миграцию фреймворка (React на Vue, Webpack на Vite). Это нормально, но банально. Сильнее звучит конкретный UI/UX-компромисс — «мы выкатили фичу с оптимистичными обновлениями и смирились с редким мерцанием при реконсиляции, потому что выигрыш в задержке стоил больше, чем визуальный лоск». Реально, конкретно и раскрывает суждение. Смотрите наше руководство по тренировке behavioral-интервью для полного фреймворка STAR.

Часто задаваемые вопросы