Загрузка…
Загрузка…
frontend / middle_plus / tech_deep
Формат
online
Стадия
tech_deep
Когда
within_quarter
Длительность
—
01
Код
Сверстайте квадрат любого цвета в левом верхнем углу и анимацией подвиньте его горизонтально в правый угол (без React, стандартными средствами HTML/CSS; анимация по загрузке страницы или по кнопке).
Лайвкодинг в онлайн-песочнице (sandbox). Кандидат решил через transform + hover.
02
Теория
Почему ты решил делать анимацию через transform?
Follow-up к задаче с квадратом. Ожидаемый ответ: transform выполняется на GPU и триггерит только composite.
03
Теория
Расскажите про этап Layout в пайплайне рендеринга браузера (что на нём происходит).
Кандидат ответил про render tree и расчёт размеров/положения элементов.
04
Теория
Заметки
Транскрипт видео с реальным собеседованием на позицию middle+/senior frontend-разработчика с вилкой до 350 000 руб. на руки в крупную компанию. Название компании напрямую не озвучено, но по контексту это образовательное подразделение Сбера: упоминаются «сберобразование», платформа «СберКласс» (32 000 активных пользователей, 300 школ), 3D-город «как в Симсе», визит Грефа 1 сентября. Стек и процессы: переход на React 19, webpack + Module Federation, Next.js для лендингов и коробочных продуктов, Three.js на 3D-проектах, Kubernetes/Docker/Helm, недельные спринты, 15 небольших команд, pixel perfect с допуском ~3–5 px, ИИ-генерация кода разрешена с обязательной проверкой, переработки не приветствуются (исключение — неделя перед 1 сентября). Кандидат упомянул, что параллельно проходит собеседования в другой компании («в Я», вероятно Яндекс): первый этап пройден, второй через неделю; там задачу про дерево файлов просят решать без рекурсии за 15 минут. В начале видео — реклама услуг менторства автора канала.
Подготовка
По содержанию собеседования: знать пайплайн рендеринга браузера (layout, paint, composite, тайлинг/растеризация — интервьюер рекомендовал загуглить спецификацию этапов движка Chromium), производительные CSS-анимации (transform, will-change, слои и их цена по видеопамяти), отличия localStorage/sessionStorage/cookies и ограничения кук, CORS (зачем придуман, как чинить), литеральные типы в TypeScript, рекурсивные задачи на обход вложенных структур и классические задачи вроде rand7→rand10 с LeetCode.
Стиль интервьюера
Два интервьюера, неформальный дружелюбный тон. Сознательно не спрашивают «классику» вроде event loop — вместо этого лайвкодинг с теоретическими врезками и follow-up'ами по ходу решения. Ситуационные вопросы в формате ролевых сценок («я сеньор, приношу код на ревью», «я джуниор с ошибкой CORS»). На сложной задаче важнее ход рассуждений, чем готовое решение; слишком быстрое идеальное решение вызывает подозрение в списывании. В конце подробно и откровенно рассказывают о проекте, команде и процессах.
Если бы я попросил нарисовать этот квадрат так, чтобы Layout происходил на каждом кадре анимации — как бы ты это сделал?
Ожидаемый ответ: анимировать через position absolute / margin / padding.
05
Теория
Что происходит на этапе Composition (композиции) в рендеринге браузера?
Кандидат рассказал про разбиение на слои и вынос вычислений на GPU.
06
Теория
Какие этапы рендеринга идут после Composite/Paint? (ещё две стадии — тайлинг/растеризация и сборка изображения)
Кандидат не вспомнил; интервьюер сам объяснил и порекомендовал загуглить спецификацию этапов рендеринга движка Chromium.
07
Теория
Знаешь ли ты свойство/способ, который позволяет производительно делать анимации? (will-change)
08
Теория
Я знаю подход, что можно выносить элементы на слои — давай я по максимуму вынесу всё на слои. Что в этом будет плохого?
Ожидаемый ответ: рост потребления видеопамяти (вкладка может весить 500+ МБ), деградация производительности, особенно без дискретной видеокарты.
09
Код
Сможешь нарисовать пакмана из этого квадрата на CSS? Без анимации: круг, вырезать уголок (открытый рот) и воткнуть глаз.
Необязательная задача «на интерес»; обсуждались варианты через position absolute, наложение слоёв, ::before/::after, SVG.
10
Теория
Чем отличаются localStorage и sessionStorage (хранилища браузера)?
Ответ: sessionStorage очищается при закрытии вкладки, localStorage хранится до ручной очистки.
11
Кейс
Ситуация: сеньор приносит тебе на ревью код, где по просьбе продукта история заказов пользователя записывается в cookie. Это хорошая идея?
Follow-up: «допустим, история заказов всегда влезает в 4 КБ — всё равно плохо?». Ожидаемые аргументы: лимит 4 КБ, куки отправляются с каждым запросом на сервер — лишний трафик.
12
Кейс
Ситуация: джуниор говорит — на локалке всё работало, начал выкатывать, и перестало работать, в консоли ошибки про CORS. Что делать, как помочь?
Обсуждались варианты: добавить источник в список разрешённых на бэкенде, настройка прокси (на локалке через дев-сервер, в проде так не выйдет).
13
Теория
Порассуждай: зачем вообще придумали CORS, от чего он защищает?
Кандидат привёл пример: чтобы сайт Сбербанка не мог запросить данные Альфа-Банка; интервьюер уточнил про залогиненность и куки, ответ засчитан.
14
Теория
Какой тип данных будет у переменной в TypeScript, если написать const x = 5?
const x = 5Правильный ответ: литеральный тип 5 (не просто number).
15
Код
Дан вложенный объект (структура с именами файлов и папок) — вывести (залогировать) её в виде дерева файловой системы с отступами и переносами строк.
Решение через рекурсивную функцию, символ \n и отступы пробелами. По словам интервьюера, такую же задачу дают «в Я» (другая компания), но там просят решить без рекурсии за 15 минут.
16
Код
Есть функция, которая выдаёт случайное число от 1 до 7 (rand7). Напиши функцию, которая выдаёт случайное число от 1 до 10 (rand10), используя только rand7 (Math.random использовать нельзя).
Классическая задача (LeetCode rand7→rand10). Кандидат до решения не дошёл; интервьюеры сказали, что им важнее было послушать рассуждения — сами решали её полдня (вариант через генерацию случайных бит).
17
Поведенческий
Расскажи, насколько тебе понравилось собеседование? Есть ли у тебя вопросы к нам?
Финальная часть: кандидат спросил про проект, команду и процессы; интервьюеры подробно рассказали о компании.