Какие вопросы задают на собеседовании в WB (frontend, middle)?

Question

Маяк · Accepted Answer

1. Расскажите кратко о вашем опыте (HR-скрининг с рекрутером).
2. Какие у вас зарплатные ожидания?
3. Расскажите про Event Loop: как он устроен, какие у него особенности с точки зрения работы в браузере?
4. К чему относится Web API? Пользовательские/браузерные события — это микротаски или макротаски?
5. Макротаска начала исполняться, в процессе её исполнения появились микротаски, а в очереди за ней стоит ещё одна макротаска. В каком порядке всё выполнится?
6. Задача: выставить порядок вывода console.log в коде с синхронным кодом, setTimeout, Promise (resolve) и обработчиками .then.
7. Усложнённая задача: разобрать код с setTimeout(0) и async-функцией, которая рекурсивно порождает промисы по цепочке. Что произойдёт, дойдёт ли очередь до таймера?
8. Опишите процесс рендеринга страницы браузером: контент пришёл с сервера (статус 200), ресурсы подгрузились — что происходит дальше до отображения у пользователя?
9. Какие этапы рендеринга происходят при изменениях в интерфейсе (когда что-то перекрасилось или поменяло расположение)?
10. Какой из этапов рендеринга (layout/reflow или paint) более ресурсный/тяжёлый?
11. Как вы избавляетесь от reflow? Приведите пример кейса, где это помогло.
12. Можем ли мы управлять процессом подгрузки скриптов на странице? Что происходит с браузером, когда подгружаются JS-чанки?
13. Чем defer отличается от async: при каком событии скрипт с defer гарантированно выполняется?
14. Расскажите про HTTP в разрезе фронтенда: что знаете, какие нюансы и тонкости (версии протокола, методы, коды ответов, заголовки)?
15. Есть ли у GET-запроса технически body (тело запроса)?
16. Семантика HTTP-методов — это руководство к применению? Можно ли, например, через DELETE записывать что-нибудь в базу данных?
17. Есть ли принципиальное отличие в том, как браузер обрабатывает GET- и POST-запросы при получении данных?
18. Какие ещё протоколы, кроме HTTP(S), мы используем на фронте?
19. Зачем нужны вебсокеты? Какую проблему мы решаем с их помощью?
20. Расскажите про CORS: как эта штука работает и для чего нужна? Как обойти запрет кросдоменных запросов?
21. Можно ли как-то обмануть браузер в части CORS? Как на фронте стандартно ходят с localhost на бэкенд в dev-режиме?
22. На каких фреймворках писал, на чём предпочитаешь писать фронтенд и почему? Что нравится/не нравится в React?
23. Если бы ты стартовал новый проект с нуля (нет ограничений по команде и экспертизе, нужны оптимизация, масштабируемость и поддерживаемость кодовой базы на долгосрок) — какой стек/фреймворк выбрал бы и почему?
24. Сравни Vue и React: почему, на твой взгляд, у Vue больше шансов выбраться в топ, несмотря на лидерство React? В чём проблемы React?
25. Посмотри на синтаксис с чейнингом (вызов методов на коллекции элементов): о чём он тебе говорит, что напоминает?
26. Реализуй jQuery-подобную функцию $: подбор коллекции элементов по селектору, методы управления нодами (addClass/removeClass/toggleClass, css, html) и чейнинг — чтобы методы можно было вызывать в любом порядке, обращаясь к актуальному состоянию нод.
27. Follow-up к задаче про $: метод css должен добавлять новые свойства, сохраняя при этом все старые стили (мержить, а не перезаписывать style целиком).
28. Follow-up к задаче про $: решение реализовано для одной ноды — расширь его, чтобы оно работало с коллекцией элементов (методы применяются к каждому элементу коллекции).