Frontend вопросы на собеседовании в 2026 году: HTML, CSS, JS и производительность
Полный разбор актуальных вопросов для Frontend-разработчиков в 2026 году. Глубокий анализ HTML6, CSS Next, сигналов в JS и метрик Core Web Vitals.
Разбор сложных тем Frontend-интервью в 2026 году: гидратация, WebAssembly, управление памятью и микрофронтенды. Подготовьтесь к Senior-позиции.
К 2026 году стандартный стек React/Vue перестал быть преимуществом — это базовое требование. Теперь на собеседованиях в компании уровня BigTech (Яндекс, Авито, Тинькофф) фокус сместился на три области: Core Web Vitals нового поколения (Interaction to Next Paint), эффективное использование WebAssembly для тяжелых вычислений и стратегии рендеринга (Island Architecture, Streaming SSR).
На интервью уровня Senior часто просят объяснить, как работает V8 при очистке памяти в долгоживущих SPA. Важно понимать разницу между Scavenge (Young Generation) и Mark-Sweep-Compact (Old Generation). Практический вопрос: «Почему замыкание может привести к утечке памяти, если переменная внутри него не используется напрямую в возвращаемой функции?». Ответ кроется в структуре контекста выполнения: если хотя бы одна функция в замыкании обращается к переменной, весь лексический контекст сохраняется в памяти.
В 2026 году недостаточно знать разницу между макро- и микрозадачами. Вас спросят про scheduler.postTask() — нативный API для приоритизации задач. Эксперт должен объяснить, как распределить нагрузку так, чтобы тяжелые вычисления не блокировали ввод пользователя, используя yield в длинных циклах или requestIdleCallback для аналитики.
Если проект масштабный, вопрос про микрофронтенды неизбежен. Основная сложность — шаринг зависимостей и версионирование. В 2026 году стандартом стал Native Module Federation. На собеседовании могут спросить: «Как избежать конфликта версий React, если два микрофронтенда загружают разные мажорные версии на одну страницу?». Решение через синглтоны в конфиге федерации или изоляцию через Shadow DOM — то, что ждут от опытного архитектора.
После популяризации Qwik и новых версий Next.js, концепция Resumability (возобновляемость) стала частой темой. В отличие от классической гидратации, где браузер заново выполняет JS для восстановления состояния, Resumability позволяет сериализовать состояние на сервере так, чтобы клиент подхватил его без лишних вычислений. Сравнение этих подходов — маркер того, что разработчик следит за индустрией.
В 2026 году Wasm используется не только в играх, но и в обработке видео, криптографии и сложных фильтрах в браузере. Вопрос: «Когда перенос логики в Wasm замедлит приложение?». Опытный разработчик укажет на стоимость передачи данных между JS и Wasm через линейную память. Если данные небольшие, накладные расходы на мост превысят выгоду от скорости выполнения кода.
Обсуждение CSP (Content Security Policy) теперь включает Trusted Types. Это механизм, предотвращающий DOM-based XSS атаки. На интервью могут попросить написать политику, которая запрещает использование innerHTML без предварительной санитизации через доверенный тип.
Ожидайте вопросы по сложным типам: Template Literal Types, Variadic Tuple Types и использование satisfies. Практическая задача может звучать так: «Напишите тип, который из объекта делает плоский список ключей с точечной нотацией (deep keyof)». Это проверяет навык написания рекурсивных типов, необходимых для сложных дизайн-систем или библиотек управления состоянием.
INP — это метрика Core Web Vitals, которая пришла на смену First Input Delay в 2024 году. Она измеряет задержку всех взаимодействий пользователя со страницей. Оптимизация включает: разбиение длинных задач (Long Tasks > 50ms) с помощью scheduler.yield(), минимизацию пересчета стилей (Layout Thrashing) и использование content-visibility: auto для ленивого рендеринга DOM-узлов.
Гидратация требует загрузки и выполнения JS-кода всех компонентов на странице, чтобы прикрепить обработчики событий. Resumability (как в Qwik) позволяет сериализовать обработчики в HTML. Браузеру не нужно выполнять JS при загрузке — он скачивает конкретный обработчик только в момент клика, что дает мгновенный TTI (Time to Interactive).
WeakRef позволяет создать слабую ссылку на объект, которая не мешает сборщику мусора удалить этот объект. Это полезно для создания кэшей больших объектов (например, изображений), чтобы они автоматически удалялись из памяти, когда больше не используются в приложении, предотвращая утечки.
Tailwind решает проблему стилизации, но не изоляции. В крупных проектах с микрофронтендами CSS Modules или Shadow DOM необходимы для предотвращения коллизий имен классов и глобального загрязнения стилей, особенно если разные команды используют разные версии дизайн-системы.
Вместо прослушивания события scroll используйте IntersectionObserver для отслеживания видимости элементов. Для рендеринга тысяч элементов обязательна виртуализация (например, через react-window или нативный content-visibility), чтобы в DOM находилось только 10-20 видимых узлов.
Узнайте актуальные зарплаты и карьерный рост во Frontend
Смотреть зарплаты