Вопросы на техническом интервью с Senior Frontend

Технические навыки JS/TS

Чему равно typeof null?

typeof null

Ответ: typeof null возвращает строку 'object'.

Это ошибка дизайна JavaScript, которая тянется с первой версии языка. В JS значения хранились в 32-битном виде, где первые несколько бит определяли тип данных. Для объектов тег типа был равен 000. В результате движок ошибочно интерпретировал его как объект.

Объясните разницу между null и undefined

Ответ:
undefined значение не присвоено. Это состояние по умолчанию для объявленных переменных, отсутствующих ключей в объекте или непереданных аргументов функции.
null намеренное отсутствие значения. Значение уже известно, и это значение используют в качестве явного сигнала отсутствия данных в бизнес-логике.

Что произойдет при выполнении кода?

async function foo() {
  return Promise.resolve(1)
}

(async () => {
  console.log(await foo() === 1)
})();

Ответ: true.

Функция, помеченная как async, всегда возвращает Promise. Даже если вы явно возвращаете Promise.resolve(1), среда выполнения оборачивает результат в новый промис. Однако, согласно спецификации, если возвращаемое значение уже является промисом, оно разрешается (flattening), и цепочка промисов не вкладывается друг в друга бесконечно.

В выражении await foo() === 1 оператор вызова функции () и оператор awaitимеют более высокий приоритет, чем строгое сравнение ===.

Итог:

• Сначала выполняется foo().
• Затем await извлекает результат.
• И только потом происходит сравнение 1 === 1.

Что будет типом T0?

type Flatten<T> = T extends any[] ? T[number] : T;
type T0 = Flatten<string[]>;

Ответ: string.

В основе лежит конструкция T extends any[] ? ... : .... Это тернарный оператор на уровне типов. В данном случае мы проверяем, является ли входящий тип T массивом. В TypeScript обращение по индексу number к типу массива возвращает тип его элементов. Так как T в данном контексте — это string[], то string[][number]превращается в string.

Технические навыки Vue и Nuxt

Опишите жизненный цикл компонентов Vue 3

В Composition API большинство хуков имеют префикс on и импортируются из vue.

Какие способы SSR есть в реализации в Nuxt 3?

SSR

Сервер генерирует HTML, отправляет его клиенту, а затем происходит гидратация.

• Плюсы: SEO, быстрый FCP.
• Минусы: Нагрузка на CPU, возможный hydration mismatch.

SWR

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

ISR

Аналог SWR, но с поддержкой кэширования на уровне CDN (например, от Vercel или Netlify). Позволяет обновлять статические страницы без полной пересборки проекта.

SSG

Страница рендерится один раз при сборке (nuxt generate) и отдается как статический файл.

SPA

Страница рендерится на клиенте, используя клиентский роутинг. 

Nuxt Islands

Рендеринг отдельных компонентов строго на сервере, не отправляя их JavaScript-код на клиент. Нужно, если компонент только отображает данные, клиент будет получать только HTML/CSS, что критически уменьшает размер бандла. 

CSS лайвкодинг

Сверстайте три блока: один блок слева сверху, второй в центре экрана, третий справа сверху:

<div class="stage">
    <div class="box top-left">Левый верхний</div>
    <div class="box center">Центр экрана</div>
    <div class="box top-right">Правый верхний</div>
</div>

Ответ:

• Вариант через position absolute
• Вариант через grid

Оптимизация

Какие существуют метрики производительности?

Core Web Vitals

Ключевые метрики от Google:

• LCP (Largest Contentful Paint)
  Время отрисовки самого крупного видимого элемента (баннера или текста). В 2026 году нормой считается менее 2.0 сек.
• CLS (Cumulative Layout Shift)
  Измеряет визуальную стабильность. Насколько сильно прыгает контент при загрузке. Нормой считается менее 0.1 сек.
• INP (Interaction to Next Paint)
  В 2024 году заменила FID. Измеряет задержку отклика на любое взаимодействие от пользователя до момента отрисовки следующего кадра. Важно, чтобы INP был менее 0.2 сек.

Loading Metrics

TBT (Total Blocking Time)
Суммарное время, когда основной поток был заблокирован JavaScript-задачами более чем на 50 мсек. Напрямую коррелирует с INP.

TTFB (Time to First Byte)
Время до получения первого байта от сервера.

FCP (First Contentful Paint)
Время полученное, когда пользователь видит хоть что-то на экране.

Как вы находите утечку памяти в Vue-компоненте?

Шаг А: Снятие слепков (Heap Snapshots)

1. Открываем DevTools -> вкладка Memory.
2. Выбираем Heap Snapshot.
3. Делаем первый снимок (базовое состояние).
4. Выполняем действие, которое предположительно вызывает утечку (например, открываем и закрываем компонент 10 раз).
5. Делаем второй снимок.
6. Используем фильтр Comparison между вторым и первым снимком. Если количество объектов (например, VNode или Detached HTMLDivElement) растет и не убывает — утечка найдена.

Шаг Б: Анализ выделения памяти (Allocation Instrumentation)

Если снимки не помогают, используем Allocation Timeline. Если после завершения действия память не освобождена, смотрим, какие функции вызывали аллокацию.

Как уменьшить нагрузку на клиент и скорость рендеринга больших JSON-объектов?

Архитектурный подход

Прежде чем оптимизировать рендеринг, нужно уменьшить объем данных, приходящих на клиент.

• BFF (Backend for Frontend)
  Реализация прослойки, которая фильтрует лишние поля из огромного JSON. Если фронтенду нужны только id и title, он не должен получать объект на 200 полей.
• Пагинация и Infinite Scroll
  Не рендерим все списки сразу.
• GraphQL
  Позволяет клиенту запрашивать только необходимые данные по сети.
• Сжатие
  Убедиться, что на сервере включено сжатие (Brotli/Gzip).

Оптимизация обработки при парсинге

• Если JSON весит мегабайты, даже простой JSON.parse может заблокировать Main Thread.

• Используйте shallowRef. Обычный ref делает объект реактивным, проходя по всем полям, это создает лишние Proxy-объекты и съедает память.

• Вынос парсинга и тяжелой трансформации данных на WebWorker выносит вычисления в отдельный поток.

• Если данных слишком много, использовать потоковое чтение JSON через Stream API, чтобы обрабатывать объекты по мере их поступления.

Как можно оптимизировать рендеринг больших списков или таблиц?

• Использовать виртуализацию (Virtual Scrolling). Тем самым, оставить число DOM-узлов константным, независимо от размера списка элементов.

• Использование v-once заставит Vue отрендерить компонент один раз и исключить из обновлений.

• Использование v-memoпозволит мемоизировать поддерево DOM. Рендеринг будет происходить только в том случае, если изменилось конкретное значение в массиве зависимостей.

• CSS-оптимизацияcontent-visibility: auto позволит пропустить рендеринг и расчет макета для элементов, находящихся за пределами экрана. Вместе сcontain-intrinsic-size задаст резервируемое место для элементов для скролла.

Системный дизайн

Какие архитектурные подходы обеспечивают масштабируемость фронтенд-систем?

• Feature-Sliced Architecture
• Clean Architecture
• Onion Architecture

Домашнее задание

Создайте приложения с WebPush-уведомлениями в монорепозитории и выложите его на гитхаб.

Необходимо разработать систему WebPush-уведомлений, состоящую из фронтенд-приложения и backend-сервера, размещённого в едином монорепозитории. Репозиторий должен быть организован с использованием workspaces, с разделением на два пакета: client и server. Разрешается использовать готовую библиотеку например WebPush.js для генерации и отправки уведомлений.

Технические требования:

1. Фронтенд на Vue 3
   • Реализована функциональность подписки на Push API через WebPush.
   • Кнопка обеспечивающая подписку клиента на сервер.
2. Бэкенд на Node.js (любой фреймворк).
   • Созданы два эндпоинта:
     • Получение и сохранение подписчика
     • Отправки WebPush-уведомления конкретному подписчику
3. Результат
   • Приложение позволяющее подписывать клиента на WebPush-уведомления 
   • Сервер отправляющий персонализированные push-уведомления 
   • Корректно настроенный монорепозиторий
   • Реализовано VAPID хранилище