Ваши собеседования должны охватывать определенный набор технологий, которые являются ключевыми для разработки фронта. Также важно перейти от теории к практике — решение проблем и задавание вопросов, относящихся к конкретным частям кода, гораздо полезнее для оценки глубины знаний интервьюируемого.
Технические вопросы Есть ряд технологий, которые необходимы фронтенд-разработчику. В общем, задавать очень конкретные вопросы не так полезно, как использовать открытые вопросы в качестве отправной точки для более подробного обсуждения проблем.
Вопросы о веб-протоколах (HTTP и HTTPs, TCP/IP) Эти протоколы объясняют, как браузеры взаимодействуют с клиентами. Их знание необходимо для понимания того, как работает приложение, и устранения неполадок. Какие вопросы вы можете задать
1. Сравните и сопоставьте запросы GET и POST.
Самое важное, что кандидат должен определить, это то, что это оба HTTP-метода, но запросы GET используют строку запроса для извлечения ресурсов, в то время как запросы POST отправляют данные для создания или обновления ресурса с данными, хранящимися в остальном теле. Эта страница W3 содержит удобную таблицу, сравнивающую их.
2. Когда вы можете столкнуться с запросом PUT? Семантическое различие между Put и POST несколько нюансировано, но если кандидат вообще работал с веб-сервисами, он поймет, что запросы PUT обычно используются для обновления ресурсов, тогда как POST используется для создания новых ресурсов.
3. Как HTTP связан со стеком TCP/IP? Хотя это и не обязательно необходимо, кандидаты могут быть знакомы с тем, что существуют разные уровни протоколов связи, используемых для подключения компьютерных систем, и что HTTP — это прикладной уровень, используемый веб-клиентами и веб-серверами, построенный поверх уровня транспорта/передачи (TCP). ) и уровень управления сетью/путем (IP).
Вопросы о HTML HTML — это базовый механизм структурирования элементов на веб-странице или в веб-приложении. Это язык разметки, который браузеры понимают и анализируют для отображения текста и изображений. Разработчик должен свободно разбираться в том, как создавать документы HTML и как интерпретировать исходный код HTML.
4. В чем разница между тегом и атрибутом в HTML?
Кандидаты должны быть в состоянии определить, что теги определяют элементы страницы и заключенный в них текст (если есть), обычно с помощью начального и конечного тегов, а атрибуты представляют собой пары «имя-значение», которые относятся к тегам и определяются в начальном теге. Общие атрибуты включают идентификатор (который должен быть уникальным для идентификации элемента на странице), класс и стиль. В приведенном ниже примере «p» — это тег, а «style» — атрибут.
<p style="color:blue;">Это абзац</p>
5. В чем разница между тегами span и div? Когда бы вы использовали любой из них?
Оба являются общими структурными элементами, но теги <div> по умолчанию являются событиями блочного уровня (это означает, что они охватывают страницу и по умолчанию не отображаются в одной строке), в то время как теги <span> являются встроенными элементами, и несколько тегов могут отображаться в одной строке.
6. Какова роль тега head в HTML-документе? Кандидаты должны указать, что заголовок содержит машиночитаемые метаданные о странице, а типичные подэлементы включают заголовок, метатеги, теги сценариев и таблицы стилей (или ссылки на таблицы стилей). Их не следует путать с тегами заголовков различных уровней (<h1>, <h2> и т. д.), которые определяют структуру страницы так же, как в схеме.
7. Что такое ДОМ? Объектная модель документа — это объектная модель древовидного типа для HTML и API для JavaScript, который позволяет динамически изменять структуру страницы путем добавления, изменения или удаления элементов и атрибутов HTML, а также стилей CSS.
Вопросы о CSS (каскадных таблицах стилей) CSS используется в сочетании с HTML и является еще одной важной технологией, в которой должен разбираться разработчик внешнего интерфейса. В то время как HTML обеспечивает структуру, CSS определяет способ отображения элементов, будь то цвета, позиционирование или стиль текста.
8. Опишите различные типы селекторов, используемых в CSS.
Стили CSS можно применять к определенным классам, элементам, элементам с заданными атрибутами или на основе уникального идентификатора элемента. Кроме того, существует ряд «псевдо» классов, основанных на взаимодействии конечного пользователя с элементами, например, при редактировании поля формы или наведении указателя мыши на элемент.
9. Опишите модель бокса CSS Блочная модель CSS используется для воздействия на макет страницы с помощью свойств, которые охватывают содержимое каждого элемента, включая его поля, границы и отступы, которые можно изменить выше, ниже и по бокам от этого элемента.
CSS-диаграмма. Общие сведения о полях, границах и отступах
10. Какие существуют способы скрыть элемент с помощью CSS?
Элементы можно скрыть, удалив их из DOM или изменив свойства CSS, такие как отображение, видимость или скрытый атрибут HTML5. Какой метод вы используете, по-разному влияет на макет и доступность элемента с помощью навигации с помощью клавиатуры.
Вопросы о JavaScript В то время как HTML обеспечивает структуру, а CSS определяет отображение, JavaScript делает веб-страницы динамичными — это язык сценариев, который поддерживают все браузеры и который необходим для интерактивности веб-приложений.
11. Что такое обратный вызов в JavaScript?
Функции обратного вызова являются ключевой частью JavaScript. Обратные вызовы используются для разработки асинхронного кода, гарантируя, что данная функция не будет запущена после завершения данной задачи. Функции обратного вызова используют тот факт, что сами функции являются объектами и могут быть переданы в качестве аргументов другой функции. Звучит сложно? См. это руководство по функциям обратного вызова JavaScript.
12. Опишите, как работает лексическая область видимости в JavaScript На видимость и доступность переменных и функций влияет область , в которой они объявлены. Эти элементы могут быть глобальными и, следовательно, доступными для всего кода или локальными для блока кода или функции. Внутренние функции лексически связаны с внешними функциями, что означает, что они имеют доступ к переменным, объявленным их внешними функциями.
13. Как бы вы определили и использовали классы в JavaScript?
Класс — это, по сути, шаблон для инкапсулированного повторно используемого кода, для которого может быть несколько экземпляров (называемых объектами), как и в любом объектно-ориентированном языке. Классы содержат данные в виде переменных и функций, выполняющих код. Вы объявляете классы либо как функции, либо с помощью ключевого слова class. У классов есть специальная функция, называемая конструктором, используемая для установки внутренних значений при создании нового экземпляра. Другие функции могут быть вызваны для экземпляра по мере необходимости. Попросите их создать простой класс и создать два экземпляра, распечатав значение переменной-члена, отличное для каждого экземпляра.
Вопросы о интерфейсных фреймворках: React, Angular, Vue, jQuery Такие платформы предоставляют механизмы для создания сложных динамических приложений с использованием базовых технологий HTML, CSS и JavaScript. Как правило, вы должны направлять свои вопросы на интервью на технологии, которые вы используете в проекте.
Работа с веб-сервисами
Внешние интерфейсы, которые вызывают микросервисы, являются популярным шаблоном проектирования. Интерфейсным разработчикам часто приходится устранять проблемы с API-интерфейсами веб-служб, чтобы данные отображались конечным пользователям.
14. Как можно вызвать веб-службу?
Существует множество различных методов, которые можно использовать для вызова веб-служб, таких как:
XMLHttpRequest
Axios (популярная библиотека с открытым исходным кодом)
jQuery (с использованием $, ajax())
15. Каковы основные характеристики службы RESTful? RESTful API (REST — сокращение от REpresentational State Transfer) — это архитектурный стиль, который использует HTTP-запросы для доступа и преобразования ресурсов через веб-службы. Такие API спроектированы так, чтобы не иметь состояния, и в них используются нативные глаголы HTTP (GET, POST, PUT, DELETE), а также представление о том, что ресурсы должны быть однозначно идентифицируемы с помощью одного URL-адреса, который возвращает обратное представление состояния ресурсов в виде JSON или XML/
16. С какими веб-сервисами вы работали в прошлом? Для этого вопроса, предполагая, что кандидат вызывал веб-службы, вы должны выяснить, как он понимает различные операции и конечные точки, которые могут быть вызваны через API, и какие полезные нагрузки и ошибки могут быть возвращены в результате таких вызовов.
Инструменты и технологии для разработчиков В дополнение к конкретным технологиям, используемым для создания интерфейсов, вам необходимо получить представление об опыте вашего кандидата в области инструментов разработки, технологий и передового опыта, чтобы убедиться, что он будет продуктивным членом вашей команды.
Вопросы об управлении кодом с помощью контроля версий Управление кодом — неотъемлемая часть процесса разработки. Даже младшие разработчики должны иметь некоторое представление о том, как выполнять ветвление и слияние кода.
17. Как выглядит конфликт слияния? Конфликты слияния возникают, когда у вас есть конкурирующие коммиты в объединяемых ветвях. Это может произойти, если в одни и те же строки кода были внесены изменения. Вам нужно решить, какие строки должны быть включены в окончательное слияние.
Вопросы об отладке кода Хороший способ познакомить младшего разработчика с вашей кодовой базой — попросить его исправить проблемы в вашем бэклоге, поэтому вы захотите увидеть, каковы их способности к устранению неполадок.
18. Найдите и объясните логическую ошибку
Покажите кандидату участок кода и попросите его найти логическую ошибку (например, ошибку, возникающую из-за приоритета оператора).
Вопросы о структурах данных Вы хотите получить представление о знакомстве кандидата с концепциями программирования высокого уровня, которые повлияют на производительность кода. Разработчики с более традиционным академическим образованием должны справляться с этими вопросами лучше, чем программисты-самоучки, поэтому вам следует соответствующим образом управлять своими ожиданиями.
19. Опишите разницу между списком и набором
Список — это упорядоченная последовательность элементов, которые могут дублироваться, тогда как набор — это неупорядоченная коллекция отдельных элементов.
Упорядоченная линия объектов
То, как вы структурируете и организуете свои данные, повлияет на производительность.
20. Сравните варианты использования стека и очереди Основные различия между стеком и очередью заключаются в том, что стек использует метод LIFO (последним поступил — первым обслужен) для доступа и добавления элементов данных, тогда как Queue использует метод FIFO (первым пришел — первым обслужен) для доступа и добавления элементов данных.
Используйте очередь, когда вы хотите получить вещи в том порядке, в котором вы их разместили (примером может служить обработка звонков в колл-центре в порядке их поступления). Используйте стек, когда вы хотите получить вещи в порядке, обратном порядку их размещения (хорошими примерами могут быть кнопка «Назад» в браузере или обработка операций отмены в текстовом редакторе).
Вопросы о безопасности кода Понимание того, насколько кандидат справлялся с проблемами безопасности с помощью кода, является хорошей точкой данных, поскольку вы захотите убедиться, что он помнит о проблеме.
21. Что такое межсайтовый скриптинг (XSS)?
XSS — это тип «атаки», при которой вредоносный код внедряется на веб-сайты, пользующиеся доверием. Браузер конечного пользователя, не подозревая о каком-либо обмане, выполнит сценарий. Вредоносный скрипт получит доступ к файлам cookie, маркерам сеанса или любой другой конфиденциальной информации, хранящейся в браузере. Существуют различные типы атак, в том числе отраженные, сохраненные и XSS на основе DOM. Атаки можно предотвратить путем очистки ввода, кодирования вывода и использования соответствующих заголовков ответа.