Загрузка…
Загрузка…
frontend / middle / tech_deep
Формат
online
Стадия
tech_deep
Когда
within_quarter
Длительность
—
01
Поведенческий
Расскажите кратко о вашем опыте (HR-скрининг с рекрутером).
Этап HR-скрининга: рекрутер рассказала про компанию и команду, кандидат описал опыт.
02
Поведенческий
Какие у вас зарплатные ожидания?
Этап HR-скрининга. Кандидат озвучил ожидания от 400 000 руб. на руки.
03
Теория
Расскажите про Event Loop: как он устроен, какие у него особенности с точки зрения работы в браузере?
Просили рассказать «на ход ноги» параллельно с задачей на порядок вывода console.log.
04
Теория
К чему относится Web API? Пользовательские/браузерные события — это микротаски или макротаски?
Заметки
Транскрипт видео о техническом собеседовании во фронтенд-команду ВБ (Wildberries; в тексте также упоминается как «Алberрис», очевидно искажённое распознавание). Воронка: HR-скрининг с рекрутером (рассказ о компании, опыт, зарплатные ожидания от 400 000 руб.), затем техническое интервью с фронтенд-инженером из другой команды (кросс-собеседования, интервьюер не мог рассказать о продукте и команде). Лайвкодинг проходил в Яндекс Код. Фидбэк положительный, но из-за затянувшейся обратной связи исходная вакансия закрылась, и кандидата пригласили в другой отдел — VB Travel. Часть разговора (вопросы кандидата интервьюеру) вырезана из-за возможного NDA. Обратную связь обещали в течение трёх рабочих дней через HR.
Подготовка
Автор подчёркивает: крайне важно задавать вопросы собеседующему — это помогает принять взвешенное решение и показывает заинтересованность; идти на собеседование без подготовленных вопросов к компании не стоит, описание вакансии у всех шаблонное.
Стиль интервьюера
Интервьюер доброжелательный, формат разговорный с «холиварной» частью про фреймворки, активно делится собственным развёрнутым мнением (про React, Vue, Angular, TypeScript). По ходу лайвкодинга подсказывает, направляет к улучшению решения, соглашается и подтверждает правильные ответы. Собеседование прошло комфортно, в дружелюбной атмосфере.
Follow-up к вопросу про Event Loop.
05
Теория
Макротаска начала исполняться, в процессе её исполнения появились микротаски, а в очереди за ней стоит ещё одна макротаска. В каком порядке всё выполнится?
Follow-up к вопросу про Event Loop.
06
Код
Задача: выставить порядок вывода console.log в коде с синхронным кодом, setTimeout, Promise (resolve) и обработчиками .then.
Лайвкодинг в Яндекс Код. Кандидат верно определил порядок: синхронный код → микротаски (.then) → таймер.
07
Код
Усложнённая задача: разобрать код с setTimeout(0) и async-функцией, которая рекурсивно порождает промисы по цепочке. Что произойдёт, дойдёт ли очередь до таймера?
Правильный ответ: очередь не дойдёт до таймера — промис порождает новый промис по цепочке, микротаски не дают выполниться макротаске, интерфейс зависнет.
08
Теория
Опишите процесс рендеринга страницы браузером: контент пришёл с сервера (статус 200), ресурсы подгрузились — что происходит дальше до отображения у пользователя?
Ожидалось: парсинг HTML, построение DOM и CSSOM, render tree, layout, слои, paint.
09
Теория
Какие этапы рендеринга происходят при изменениях в интерфейсе (когда что-то перекрасилось или поменяло расположение)?
Обсуждали repaint vs relayout/reflow.
10
Теория
Какой из этапов рендеринга (layout/reflow или paint) более ресурсный/тяжёлый?
11
Теория
Как вы избавляетесь от reflow? Приведите пример кейса, где это помогло.
Кандидат привёл пример: анимация через transform: translateX (вынос на отдельный слой) вместо margin.
12
Теория
Можем ли мы управлять процессом подгрузки скриптов на странице? Что происходит с браузером, когда подгружаются JS-чанки?
Обсуждали атрибуты async и defer, блокировку парсинга HTML.
13
Теория
Чем defer отличается от async: при каком событии скрипт с defer гарантированно выполняется?
Ожидаемый ответ: DOMContentLoaded.
14
Теория
Расскажите про HTTP в разрезе фронтенда: что знаете, какие нюансы и тонкости (версии протокола, методы, коды ответов, заголовки)?
Обсуждали HTTP vs HTTPS, версии HTTP/1, 2, 3, методы GET/POST/PUT/PATCH/DELETE/OPTIONS, группы кодов 1xx–5xx, заголовки (Origin, CSP, кастомные).
15
Теория
Есть ли у GET-запроса технически body (тело запроса)?
Follow-up: технически body передавать можно (и через GET, и через DELETE), но браузером игнорируется / не используется.
16
Теория
Семантика HTTP-методов — это руководство к применению? Можно ли, например, через DELETE записывать что-нибудь в базу данных?
Ответ: технически можно, но не рекомендуется.
17
Теория
Есть ли принципиальное отличие в том, как браузер обрабатывает GET- и POST-запросы при получении данных?
Ожидаемый ответ: GET кэшируется браузером, POST — нет.
18
Теория
Какие ещё протоколы, кроме HTTP(S), мы используем на фронте?
Обсуждали вебсокеты, server-sent events, сложности балансировки вебсокетов.
19
Теория
Зачем нужны вебсокеты? Какую проблему мы решаем с их помощью?
Ожидаемый ответ: возможность серверу быть инициатором сообщений, двунаправленный обмен без перезапросов.
20
Теория
Расскажите про CORS: как эта штука работает и для чего нужна? Как обойти запрет кросдоменных запросов?
Обсуждали политику безопасности, заголовки Access-Control-Allow-Origin и др., preflight (OPTIONS) запросы.
21
Теория
Можно ли как-то обмануть браузер в части CORS? Как на фронте стандартно ходят с localhost на бэкенд в dev-режиме?
Ожидаемый ответ: прокси-конфиг в dev-режиме (localhost подменяется на нужный домен в момент запроса).
22
Поведенческий
На каких фреймворках писал, на чём предпочитаешь писать фронтенд и почему? Что нравится/не нравится в React?
«Холиварная» секция. Кандидат рассказал про опыт с React, Vue 2, Svelte (telegram mini-app).
23
Кейс
Если бы ты стартовал новый проект с нуля (нет ограничений по команде и экспертизе, нужны оптимизация, масштабируемость и поддерживаемость кодовой базы на долгосрок) — какой стек/фреймворк выбрал бы и почему?
24
Теория
Сравни Vue и React: почему, на твой взгляд, у Vue больше шансов выбраться в топ, несмотря на лидерство React? В чём проблемы React?
Дискуссия: серверные компоненты, отсутствие компиляции/LSP у React, хуки, отсутствие стандартизации архитектуры.
25
Теория
Посмотри на синтаксис с чейнингом (вызов методов на коллекции элементов): о чём он тебе говорит, что напоминает?
Вводный вопрос ко второй задаче лайвкодинга. Ответ: jQuery, функция $.
26
Код
Реализуй jQuery-подобную функцию $: подбор коллекции элементов по селектору, методы управления нодами (addClass/removeClass/toggleClass, css, html) и чейнинг — чтобы методы можно было вызывать в любом порядке, обращаясь к актуальному состоянию нод.
Лайвкодинг в Яндекс Код. Кандидат реализовал через класс (интервьюер отметил это как best practice). Также обсудили XSS-проверку для метода html.
27
Код
Follow-up к задаче про $: метод css должен добавлять новые свойства, сохраняя при этом все старые стили (мержить, а не перезаписывать style целиком).
Решение: пройтись по ключам переданного объекта стилей и присвоить их в element.style.
28
Код
Follow-up к задаче про $: решение реализовано для одной ноды — расширь его, чтобы оно работало с коллекцией элементов (методы применяются к каждому элементу коллекции).
Решение: передавать в класс коллекцию элементов и в методах итерироваться по ним.