Загрузка…
Загрузка…
frontend / middle / tech_deep
Формат
online
Стадия
tech_deep
Когда
within_quarter
Длительность
—
01
Поведенческий
Как вы взаимодействуете с бэкендерами: где и как обсуждаете контракты API?
Блок про опыт и процессы на прошлом месте работы
02
Поведенческий
Опишите процесс работы над задачей после декомпозиции: от взятия в работу до релиза.
03
Поведенческий
У вас сначала тестирование ветки, а потом код-ревью? Почему такой порядок?
Follow-up к рассказу о процессе
04
Поведенческий
Есть ли у вас тестировщики и автотесты? Какое покрытие юнит-тестами на фронтенде, есть ли e2e?
Заметки
Автор видео называет компанию «Биктех» (бигтех), но по содержанию это hh.ru: интервьюеры описывают «сайт хх.ru» — высоконагруженный проект, 1000+ сотрудников, ~230 человек в техдепартаменте, ~45 команд, канбан, BFF на Python (свой фреймворк поверх FastAPI), самописный SSR, React + самописная обёртка над Redux, Java-бэкенд, свой UI Kit, фиче-тоглы и A/B-эксперименты. Зарплатная вилка — более 350 000 руб. на руки. Это был общий технический этап (одинаковый для всех команд); следующий этап — софтовый разговор с командой (лог техсобеса передают команде). Кандидат прошёл техэтап и финал с командой, компания была готова двигаться к оферу, выслала анкету СБ, от которой кандидат отказался (приходил с фейкового аккаунта). Обратную связь компания обещала за 1–2 дня.
Подготовка
Автор отмечает, что вопросы были нетривиальные, открытые, с множеством вариантов решений — без реального опыта ответить сложно; стоит готовиться к раскручиваемым задачам-обсуждениям (event loop, производительность, аналитика, безопасность), а не только к классической теории.
Стиль интервьюера
Несколько доброжелательных интервьюеров; формат — обсуждение открытых вопросов с наводящими подсказками и постепенным усложнением условий («а если...»); интервьюер сам дополняет ответы и подсказывает направление; ведётся лог собеседования для передачи команде на следующий этап.
05
Поведенческий
Как устроено код-ревью между фронтендерами: кросс-ревью, сколько обязательных апрувов, участвует ли тимлид?
06
Кейс
Что вы делаете, если после выкатки в мастер пошли критические ошибки? Бывали ли откаты релиза?
07
Кейс
Какой регламент, если критичную уязвимость/баг нашли именно в твоей задаче, в твоём функционале?
08
Поведенческий
Дежурный по релизам — это выделенная роль или по очереди? Что ты делаешь, когда дежуришь?
09
Поведенческий
Какие системы мониторинга есть после выкатки в продакшн, за чем ты должен следить?
10
Кейс
На ревью спорный комментарий: ты считаешь, что прав, а ревьюеры просят исправить. Доказываешь свою правоту или исправляешь, чтобы задача пошла дальше?
11
Поведенческий
Что нового изучал в последнее время по фронтенду (на работе или самостоятельно)?
Follow-up: используется ли Next на проекте, как тебе серверные компоненты в новом Next
12
Теория
Долгая синхронная задача запускается в браузере по клику на кнопку. Что в это время будет происходить с пользователем, что он будет видеть?
Ответ: блокировка интерфейса на время выполнения
13
Теория
Как избежать блокировки интерфейса при долгих вычислениях в браузере? Какие есть варианты решения?
Варианты: web worker, вынос на бэкенд, разбиение задачи на части через макротаски
14
Теория
Почему мы не выносим все задачи в веб-воркеры превентивно, если это такой классный инструмент? Какие у воркеров ограничения и минусы?
Интервьюер дополнил: сериализация/десериализация данных между потоками часто тяжелее самой задачи
15
Поведенческий
Часто ли пользовался веб-воркерами на практике?
16
Теория
Расскажи подробнее, как разбить тяжёлую итерацию по массиву из 100 000 элементов на части через setTimeout, чтобы не блокировать интерфейс, и почему это работает.
Ожидалось объяснение порядка выполнения: синхронный код → микрозадачи → одна макрозадача → перерисовка
17
Теория
А если разбитые таски закидывать не в setTimeout, а в промисы (микротаски) — это поможет избежать блокировки?
Ответ: нет, очередь микрозадач выполняется до конца и тоже блокирует рендер
18
Теория
Как определить, на какие части разбивать задачу — откуда взять размер чанка (почему именно 500 элементов)?
19
Теория
На какие метрики и инструменты будешь смотреть, чтобы понять, стало лучше или хуже (user experience при выполнении задачи)?
Обсуждали TTI, FCP, вкладку Performance, стадии рендера layout/paint/reflow
20
Теория
В какую целевую цифру производительности будешь целиться (например, 60 кадров в секунду)?
21
Теория
Ты тестируешь на мощном компьютере, а пользователи сидят на разных устройствах — как проверить производительность для слабых устройств?
Ответ: троттлинг CPU и сети в браузере
22
Теория
Есть 10 параллельных fetch-запросов. После выполнения всех нужно вывести сообщение в консоль. Как это сделать?
23
Код
Поддерживаем старые браузеры: промисы есть, а Promise.all нет. Напиши/опиши полифилл Promise.all.
Follow-ups: где резолвить итоговый промис, как учесть, что промисы выполняются не по порядку (счётчик)
24
System design
При клике на ссылку нужно гарантированно отправить событие в сервис аналитики (HTTP-запрос), при этом ссылки должны работать как обычно. Как это сделать?
Большая раскручиваемая задача с разбором SPA/не-SPA, внутренних и внешних переходов
25
Теория
Что будет с отправкой аналитики при SPA-переходе и при обычном (не-SPA) переходе с перезагрузкой страницы?
В не-SPA запрос может отмениться при выгрузке страницы, все листенеры и глобальные переменные теряются
26
Теория
Какие минусы у варианта await'ить отправку аналитики перед переходом по ссылке?
Минус: переход задержится, если сервис аналитики тупит
27
Теория
В чём различие sessionStorage и localStorage?
28
Теория
Если открыть ссылку в новой вкладке — будет ли sessionStorage шариться между вкладками? Какое хранилище тогда использовать для отложенной отправки аналитики?
Ответ: sessionStorage между вкладками не шарится, использовать localStorage
29
System design
Как гарантированно отправить аналитику при переходе по внешней ссылке (на чужой домен)?
Ожидаемый ответ: промежуточная страница «вы сейчас перейдёте на сайт...»
30
Теория
Чем тебе нравится React?
31
Теория
Что такое Virtual DOM и за счёт чего он даёт прирост производительности по сравнению с прямой работой с DOM?
Обсуждали диффинг, пакетное обновление, эвристический алгоритм и ключи
32
Теория
На странице React отрендерен список, ключи — индексы массива. Две кнопки: добавить элемент в конец и в начало. Что будет хорошо, что плохо в каждом случае?
Follow-ups: что при добавлении в конец, в начало, какие ещё проблемы (неожиданное поведение/смешивание состояния элементов)
33
Теория
Какие способы оптимизации производительности React-приложения ты знаешь?
34
Теория
Когда использовать useCallback, когда useMemo, когда React.memo, и как они работают вместе?
35
Теория
А можно ли просто всегда оборачивать все компоненты в React.memo, чтобы не думать, когда нужно, а когда нет?
Ответ: нет, бездумная мемоизация — антипаттерн, тратит ресурсы
36
System design
На странице два независимых компонента: один на React, другой на чистом JS (например, таблица и фильтры). Как организовать взаимодействие между ними?
Обсуждали postMessage, query-параметры, Redux вне React
37
Поведенческий
Какой стейт-менеджер вы используете на проекте?
38
Теория
Подошёл бы Redux для взаимодействия React-компонента и компонента на чистом JS?
Redux фреймворк-агностичен
39
System design
Один из продуктов — доступ к базе резюме. Недобросовестные клиенты с честным доступом парсят базу ботом-кликером (открывают резюме и контакты скриптом). Как от этого защититься, не навредив обычным пользователям?
Вопрос «на порассуждать»; обсуждали детект подозрительной активности, лимиты, капчу
40
System design
Как бы ты настроил показ капчи перед открытием контактов: каждый раз показывать или по какому-то условию?
41
Теория
О чём ты как фронтендер думаешь с точки зрения безопасности, когда пишешь код?
Follow-ups: чем опасен внедрённый скрипт (кража данных из storage/кук), почему опасны неподдерживаемые npm-пакеты; обсуждали HttpOnly-куки, чувствительные данные в query-параметрах
42
System design
Внешний подрядчик даёт скрипт (по типу Яндекс.Метрики), который динамически выкачивает и исполняет код со своего сервера; зафиксировать версию нельзя. Как обезопасить себя — в частности, защитить наши куки и чувствительные данные?
Разбирали, почему HttpOnly/SameSite/CSP не решают задачу полностью; ожидаемый ответ — исполнять скрипт в iframe с HTML, размещённым на отдельном домене (без доступа к кукам основного сайта)