💼 Техническое интервью во ВКонтакте (Frontend)

Очень много вопросов из совершенно разных областей: от вёрстки и специфичности CSS до устройства браузера, Event Loop, производительности, React и TypeScript.

По зарплате ожидания были от 220k+, но с этим у VK обычно проблем нет — для сильных Middle специалистов вилки в районе 260–300k выглядят вполне реалистично.

🖥🖥 HTML/CSS
• Что такое доступность (Accessibility) и зачем она нужна?
• Каким инструментом экранный диктор читает aria-label?
• Если у элемента есть класс и ID с одинаковым CSS-свойством — какой стиль применится?
• Что такое специфичность (Specificity) селекторов?
• Разница между display: none и visibility: hidden?
• Какие виды позиционирования существуют?
• Чем отличаются relative, absolute и fixed?
• Как управлять специфичностью стилей?
• Влияет ли порядок объявления селекторов на итоговый стиль?
• В каком порядке браузер ищет элементы по сложному селектору?
• Как центрировать элемент? Назови несколько способов.
• Что производительнее: Flexbox или Grid?
• Что лучше для анимаций и перемещений: transform или изменение координат?
• Что вызывает reflow и repaint?
• Может ли getBoundingClientRect() инициировать reflow?

🖥 Браузер и производительность
• Что происходит после ввода URL в адресную строку?
• Как браузер загружает страницу?
• Как происходит рендеринг элемента?
• Какие структуры строятся помимо DOM?
• Чем отличаются async и defer?
• В каком порядке выполняются несколько defer-скриптов?
• Как работают inline-скрипты?
• Блокируют ли async/defer парсинг HTML?
• Какие метрики производительности знаешь?
• Что такое LCP?
• Что такое TTI?
• Где смотреть метрики и как их улучшать?
• Какой формат изображений считается современным?
• Нужен ли fallback для WebP/AVIF?

🖥 JavaScript
• Какие области видимости существуют?
• Способы объявления функций.
• Отличие Function Declaration от Function Expression.
• Примитивные и ссылочные типы.
• Что такое NaN?
• Какой у NaN тип?
• Чем Map отличается от Object?
• Для чего нужен Symbol?
• Что такое утечки памяти?
• Почему они возникают?
• Как избежать утечек?
• Что означает утечка памяти для клиента?
• Что такое Event Loop?
• Как он работает?
• Примеры макротасок.
• Клики и события — микро- или макротаски?
• Что будет, если длинная макротаска занимает поток?
• Когда обработается пользовательский клик?
• Как вынести тяжёлые вычисления?
• Что такое Web Workers?
• Выполнение скрипта — это микро- или макротаска?
• Как Event Loop связан с рендерингом?
• Можно ли строить анимации на Promise?
• Что такое замыкание?
• Что именно хранит замыкание?
• Что такое Execution Context?
• Как работает this?
• Что делают call, apply и bind?
• Чем стрелочная функция отличается от обычной?
• Какой глобальный объект используется в Node.js?

👩‍💻 React
• Зачем вообще нужен React?
• Почему появился Virtual DOM?
• Что такое реконсиляция?
• Какие причины перерендера компонента существуют?
• Что происходит с дочерними компонентами при размонтировании родителя?
• Что такое Hooks?
• Почему сообщество ушло от классов?
• Какие ограничения есть у хуков?
• Почему важен порядок вызова хуков?
• Как писать кастомные хуки?
• Распространяются ли на них правила хуков?
• Какие способы оптимизации React-приложений знаешь?
• Как работает React.memo?
• Когда мемоизированный компонент всё равно перерисуется?
• Для чего нужен useCallback?
• Как оптимизировать код, доступный только авторизованным пользователям?
• Что такое Suspense?

🖥 TypeScript
• Что такое TypeScript?
• Основные плюсы и минусы.
• Как запретить сборку при TS-ошибках?
• Насколько TS обеспечивает реальную типобезопасность?
• Чем any отличается от unknown?
• Что такое Generics?
• Как вывести тип пропсов компонента?

🚀 База собесов — 💪 Frontend Элита — 📚 Менторство — 📹 YouTube