Skip to content

Latest commit

 

History

History
219 lines (192 loc) · 17.1 KB

frontend.md

File metadata and controls

219 lines (192 loc) · 17.1 KB

Вопросы для фронтендеров

Вопросы по soft skills Вопросы по алгоритмам

Junior

Общие вопросы

  1. Решал ли какие-то задачки-каты? Codebattle, Codewars, Leetcode?
  2. Какие фреймворки знаешь, расскажи о своем опыте использования фреймворков?
  3. Как ты относишься к написанию кода: делаешь так, чтоб просто работало, или пишешь обдуманно?
  4. С какими менеджерами задач работал?
  5. Расскажи о своем пути в разработку, почему именно фронтенд?
  6. Приходилось ли писать тесты? Знаешь, что такое TDD, BDD?
  7. Как следишь за чистотой кода? Какие инструменты используешь?
  8. Какой сборщик возьмешь - webpack или vite?
  9. MobX или Redux?
  10. Для чего нужен TypeScript?
  11. Что такое CI/CD?
  12. Какой опыт работы с Docker?
  13. Отличие git revert от git reset?
  14. Сталкивался ли с ревью кода? Как проходило ревью? По какому принципу бы сам проводил ревью?
  15. Приходилось ли тебе работать в команде? Как у вас была устроена работа в Git?
  16. Какие инструменты разработки используешь?
  17. Какие виды уязвимостей знаешь? Что такое OWASP?

JavaScript

  1. В чем отличия null и undefined?
  2. Отличие var, let, и const?
  3. Строгий режим (strict mode) в JavaScript?
  4. Какие есть типы данных в JavaScript?
  5. Строки в JavaScript изменяемые? Или при добавлении символа в конец строки, это уже будет новая строка?
  6. Что такое анонимные функции?
  7. Что такое замыкание и hoisting (всплытие)? Привести пример замыкания. Есть ли разница при использовании var и let?
  8. В чем разница function declaration и function expression?
  9. В чем разница двойного равно и тройного (== и ===)?
  10. Как проверить переменную на NaN?
  11. Как в JavaScript передается параметр в функцию - по ссылке или по значению?
  12. Что делают call(), bind(), apply()?
  13. Чем отличается forEach() от map()?
  14. Что такое map(), reduce() и filter()? Расскажи про каждый и в чем разница?
  15. Как сделать глубокую копию объекта?
  16. Расскажи, какие ты знаешь способы копирования объекта в JavaScript?
  17. Что такое глубокое копирование и поверхностное?
  18. Расскажи про прототипы, что это такое?
  19. Расскажи про область видимости.
  20. Что на конце цепочки прототипов?
  21. Что такое NodeJS? Из чего он состоит?
  22. Из каких компонентов состоит Node.js?
  23. Какими способами можно обработать ошибку в Promise?
  24. Когда-нибудь приходило к тебе понимание типа “а вот здесь я хочу использовать eventemitter”? Когда его лучше использовать?
  25. Что такое Event Loop? Для чего он нужен? Какую проблему решает? Можешь рассказать, что такое Event Loop? Какие есть фазы? Если в Event Loop ничего не останется после выполнения, то что произойдет? В какой последовательности вызываются микро и макро таски?
  26. Что такое keyof и typeof?
  27. Что такое Set, Map, WeakSet, WeakMap?
  28. Что такое дескрипторы объекта?
  29. Как добавить интернационализацию в приложение?
  30. Что такое package.json?
  31. Что такое package-lock.json? Зачем нужен? Зачем его коммитить? В чем разница npm i и npm ci?
  32. Отличия ES5 и ES6?
  33. Расскажи про различия "старого" JavaScript и "нового"?
  34. Если поставить таймер на 10 секунд, то через сколько он сработает? Почему?
  35. Можешь рассказать, что такое замыкания в JS? Есть ли такое в других языках?
  36. Immediatly invoke function (самовызывающаяся функция). Это что?

React/Redux

  1. Расскажи мне про React, что это вообще такое?
  2. Какие особенности у React? Что такое JSX? Что делает метод render() в React?
  3. Что такое Virtual DOM, Дерево элементов? Какие есть фазы рендеринга? Reconciliation (согласование) в react это что?
  4. Почему на jQuery не хотят писать, а на React хотят?
  5. Если пишешь на хуках, какой единственный классовый компонент всё же нужен?(Error boundary)
  6. Какие есть компоненты жизненного цикла? Как с помощью хуков заменить их?
  7. Что такое хуки? Какие бывают хуки? Какие знаешь?
  8. В чем проблема prop-drilling и как ее решить?
  9. Зачем нужен useRef()? Как работает?
  10. Чем отличается useRef() от useState()?
  11. Как работает useLayoutEffect в React и чем он отличается от useEffect?
  12. Где в React компоненте правильно писать запросы к серверу?
  13. Отличия useMemo() от useCallback()?
  14. Что такое Redux? Зачем он нужен?
  15. Какие еще есть библиотеки, решающие эту же проблему?
  16. Что такое store?
  17. Что такое action creator?
  18. Где лучше всего делать запросы к серверу в Redux?
  19. В чем преимущества и недостатки MobX перед Redux?
  20. Можно ли использовать Redux без React?
  21. Что такое волна ререндеринга в React?
  22. Какие существуют в React причины для ререндера компонента?
  23. Что такое порталы React?
  24. Зачем нужен key в React?
  25. Что такое батчинг в React?
  26. Расскажи про процесс обновления Virtual DOM.

Фронтенд

  1. Расскажи мне про базовую структуру HTML документа. Какие там основные теги?
  2. Расскажи про специфичность селекторов.
  3. Что такое !important? Каково твое отношение к ним?
  4. Расскажи, как ты предпочитаешь работать со стилями CSS. Используешь ли какие-то препроцессоры?
  5. Размер 50vh - это сколько?
  6. Что такое семантика? Зачем она нужна?
  7. Что такое BEM методология?
  8. Что такое position absolute, relative и fixed?
  9. Разница между flex и grid?
  10. Что такое псевдоклассы? Рассказать подробно
  11. Селекторы >, +, ~. Расскажи про них, для чего используются?
  12. Какие есть три главных жизненных цикла в рамках того, как работает наша html-страничка? В эти три пункта входит рендер?
  13. Можешь рассказать, какие есть атрибуты для подключения JS-файлов? Каков их порядок вызова?
  14. За что отвечает свойство box-sizing в CSS?
  15. Расскажи про веса селекторов в CCS, от наиболее незначительных, до наиболее специфичных.
  16. Как мы можем хранить данные на фронтенде, какие хранилища знаешь?

Сети

  1. Чем отличается вообще протокол HTTP и чем он отличается от HTTPS?
  2. Что такое CORS? Это связано именно с HTTP?
  3. Что такое REST API?
  4. Какие коды ответа HTTP знаешь?
  5. Как работает HTTP? Из чего состоит HTTP запрос?

Браузер

  1. Что такое Reflow и Repaint?
  2. Когда пользователь вводит запрос в адресной строке браузера или кликает на ссылку, что происходит? Расскажи про этапы рендера.

Git

  1. Представим, ты работаешь в своей ветке, которая отделилась от develop. Внес изменения в нескольких файлах, тебя просит тимлид добавить hotfix в другой ветке. Что будешь делать. Если тебе сейчас нельзя сделать коммиты? Тебе нужно перейти из своей текущей ветки в другую, но при этом коммит делать нельзя
  2. Знаешь, в чем отличие merge от rebase?
  3. Представим, что у тебя есть ветка с тремя коммитами, и тебе нужны изменения из develop. Что произойдет с твоими коммитами, Например при ребейзе? А как с мержем?

Middle

Общие вопросы

  1. Расскажи о своем пути в разработку, почему именно фронтенд?
  2. Расшифруй и объяснени принципы SOLID.
  3. В чем отличие методов test() и match()?
  4. Что такое HTTPS и в чем отличие от HTTP?
  5. Каким образом webpack понимает, что ему какую-то часть кода нужно вынести в отдельную чанку?
  6. Что такое XML и XSD?
  7. Для чего используются куки и в чем различия между localStorage и sessionStorage?
  8. Что такое мемоизация?
  9. В чем разница между WebSocket и SSE?
  10. Плюсы и минусы Next.js?
  11. Расскажи про фронтовые архитектуры.
  12. Что такое Web Vitals? Чем отличается от Sentry?
  13. Есть ли тело запроса у GET
  14. Какие паттерны программирования знаете?
  15. Как бы вы реализовали взаимодействие бэкенда с фронтендом?
  16. Что такое Big O notation? Как рассчитывается сложность алгоритма?
  17. На Webpack или Vite настраивал ли SSR или SSG без Next.js?
  18. Сталкивался ли с ситуацией, где пришлось решать проблему серьезной утечки памяти?
  19. Расскажи про ООП и как использовал.
  20. Что такое протокол?
  21. Что такое websocket?
  22. Доводилось ли писать собственную авторизацию? Расскажи про авторизацию через токены.
  23. Какие способы оптимизации приложения знешь?

JavaScript

  1. Что такое наследование? Что дает нам прототипное наследование? Через какое свойство мы наследуем? В чем разница proto и prototype?
  2. Всё ли в JS объект?
  3. В чем разница итерация по ключам объектов через for.. in.. и через Object.keys(...)?
  4. Что такое async, await?
  5. Как принудительно отправить функцию в очередь микрозадач?
  6. Чем множество отличается от массива в Javascript?
  7. Сталкивался ли с CORS? Что это такое, почему из Postman можно выполнить запрос, а из браузера нет? Как обойти?
  8. Можешь рассказать, что такое промисы в Javascript? Где они используются?
  9. Есть браузер, в адресную строку вводим адрес и нажимаем Enter. Что в это время происходит?
  10. Для чего используются async и defer при загрузке скриптов?
  11. Если у нас есть какой-то большой файл стилей, например 50kb. Заблокирует ли он нам рендеринг?
  12. Что такое debounce()? Зачем нужен. Написать реализацию
  13. Зачем нужны классы в JS? Какие плюсы/минусы/подводные камни?
  14. Расскажи про Eslint, huski. В чем разница prettier и eslint?

TypeScript

  1. Для чего нужен TypeScript, расскажи про плюсы и минусы?
  2. Какие утилитарные типы ты можешь назвать?
  3. Что такое дженерики?
  4. Отличие интерфейсов от типов
  5. Что такое абстрактные классы? Может ли абстрактный класс нести реализацию конкретного метода? Можем ли мы методу абстрактного класса прокинуть дженерик?
  6. В чем разница между типом any и unknown? Будет ли разница при сборке?
  7. Что такое union в TypeScript?
  8. Как работают keyof и typeof в TS?
  9. Что такое infer в TS?
  10. Что такое never в TypeScript?

React

  1. Какие хуки имплементируют методы жизненного цикла? Как именно? Что делает хук useLayoutEffect()?
  2. В чем разница useImperativeHandle() и useRef()?
  3. Что такое forwardRef()?
  4. Какие есть способы принудительного рендера компонента?
  5. Для чего нужны ключи в React?
  6. Что такое reconciliation в React?
  7. Что такое React Fiber?
  8. В чем будет разница, если в React компоненте обращаться к компоненту и менять его через document.querySelector() и через ref?
  9. Что такое SSR, зачем он нужен? Как организовать SSR в React?
  10. Что такое headless компонент?
  11. Использовал ли ErrorBoundary? Как бы реализовал свой ErrorBoundary?

Верстка

  1. Как рендерится HTML в браузере. Опиши этапы.
  2. Как мы можем принудительно вынести HTML элемент на слой?
  3. В чем будет разница работы render flow, если мы будем менять позицию элемента через координаты top/left и через transform/translate?
  4. Отличие тега image от тега picture (технически и семантически)
  5. С какими препроцессорами CSS работал, с какими методологиями работал?
  6. Расскажи, как ты предпочитаешь работать со стилями CSS. Используешь ли какие-то препроцессоры?
  7. Что такое миксины?
  8. Что такое placeholder селекторы?
  9. Расскажи про различие директивы @import и @use в SCSS.
  10. Приходилось работать с готовыми Uikit?
  11. Почему плохо использовать transition: all?
  12. Какие существуют способы изоляции стилей?