Вопросы и задачи на собеседовании frontend-разработчика в 2024 году
Собеседования для программистов зачастую проходят в несколько этапов и довольно сложны. В случае поиска работы на должность фронтенд-разработчика дополнительные затруднения вызывает проверка не только технических навыков, но и уровня креативного мышления.
Первая часть собеседования – это проверка soft skill фронтендера. Затем наступает время следующего испытания по конкретным техническим компетенциям (hard skill).
В процессе интервью вам наверняка придется также продемонстрировать знание популярных библиотек и фреймворков для фронтенда.
В этой статье вы найдете наиболее распространенные вопросы и задачи с собеседований на должность разработчика, а также развернутые ответы на них.
Варианты вопросов с ответами для frontend junior во время технического собеседования
Фронтендер сейчас – достаточно универсальный боец в мире веб-разработки. Он должен быть верстальщиком, уметь создавать логику работы клиентской части, а также понимать работу серверной части веб-приложения.
Поэтому, пожалуй, стоит начать вопросы для джунов с горячо любимого HTML.
В чем разница между элементами div и span?
Div – блочный элемент, а span – строчный элемент. В соответствии с семантическими требованиями div используют для группировки контента в секции, а span – для оформления текста и изображений.
Разница между cookie, sessionStorage и localStorage
Сookie, sessionStorage и localStorage – это технологии для хранения данных в браузере на стороне клиента. Различия заключаются в использовании и хранении данных.
Cookie – небольшой и наиболее защищенный способ хранения данных пользователя, который отправляется сервером в браузер, а затем сохраняется в браузере клиента. LocalStorage и sessionStorage предназначены для хранения данных на клиенте, их нельзя прочитать с сервера, и они не подходят для хранения конфиденциальных данных.
Какая технология наиболее популярна сейчас и точно будет популярна ещё несколько лет?
Вопросы с философским уклоном уже стали нормой на современных собеседованиях. Здесь нет единого правильного варианта ответа, ведь Front-end в последние годы стал очень многогранен, обзавелся множеством прогрессивных библиотек и фреймворков.
Наиболее популярным языком сейчас является JavaScript и его фреймворки: React, Angular и Vue.js. Стоит помнить также и о технологиях, которые связаны с искусственным интеллектом, машинным обучением и анализом данных. В частности, такие библиотеки и фреймворки для визуализации данных, как D3.js и Chart.js, станут наверняка использовать для создания интерактивных графиков и диаграмм на веб-сайтах.
С какими системами контроля версий вы знакомы
Git – стандарт в индустрии, это децентрализованная система контроля версий. А также централизованные системы. Например, Subversion или SVN.
Какими способами можно визуально скрыть элемент?
-
с помощью свойства display;
-
с помощью свойства opacity;
-
с помощью свойства visibility;
-
с помощью position:absolute;
-
уменьшить размеры элемента до нуля.
Сколько ресурсов браузер может одновременно загружать с одного домена?
Это HTML-теги, которые используют для описания метаданных веб-страницы. Метаданные – это данные, которые описывают другие данные, а в вебе описывают HTML-документы. Метаданные важно указывать, чтобы поисковики правильно отображали сайт в поисковой выдаче, и он выводился на первые строчки поиска. Еще метатеги делают сайт удобнее для пользователей: позволяют быстрее понять, о чем он.
Сколько ресурсов браузер может одновременно загружать с одного домена?
Современные браузеры обычно поддерживают шесть одновременных соединений и параллельных загрузок.
Назовите 3 способа уменьшения времени загрузки страницы.
-
Минимизация количества запросов.
-
Lazy-loading.
-
Минификация CSS и JS.
Как реализовать примитивное слайд-шоу?
Подготовка разметки: сделать контейнер и блоки для слайдов.
Написать CSS для скрытия всех слайдов, кроме одного.
Написать JavaScript-код, который будет менять CSS: отображать слайды по очереди с помощью изменения классов, при этом используя setInterval.
Что такое плавающие элементы (floats) и как они работают
CSS-свойство float размещает элемент справа или слева от контейнера, в котором он находится. Браузер визуально убирает этот элемент из обычного потока. В результате окружающие элементы и текст «обтекают» элемент. Свойство float часто используют для верстки текстового контента страниц. Например, статей с иллюстрациями.
В чем разница между «сбросом» и «нормализацией» CSS?
Сброс и нормализация CSS – это два разных подхода к обнулению стилей веб-страницы.
Сброс CSS – это процесс обнуления стилей, чтобы убрать браузерные стили по умолчанию, которые могут отличаться от одного браузера к другому. Цель сброса CSS в том, чтобы создать «чистую» страницу, на которой все элементы имеют одинаковый вид в разных браузерах.
Нормализация CSS – это процесс создания единообразных стилей для разных элементов, чтобы веб-страница выглядела одинаково во всех браузерах. В отличие от сброса CSS, нормализация CSS сохраняет некоторые стили по умолчанию браузера, но при этом пытается сделать их единообразными.
Оба подхода могут использоваться в зависимости от нужд проекта. Если вы хотите создать полностью уникальный дизайн, то возможно вам нужен сброс CSS. Если же вы хотите сохранить некоторые стили браузера, но при этом сделать веб-страницу более единообразной, то нормализация CSS может быть более подходящим вариантом.
Варианты вопросов с ответами для frontend middle во время технического собеседования
Что такое Event loop и как он работает?
Это механизм в JavaScript, который позволяет выполнить асинхронный код и обрабатывать события: клики мыши, нажатия клавиш и таймеры. Event loop работает внутри JS движка и состоит из двух основных фаз: фаза синхронизации и фаза выполнения задач. В фазе синхронизации обрабатываются синхронные операции, такие как выполнение кода и обработка событий, которые были помещены в очередь в прошлый цикл. В фазе выполнения задач обрабатываются асинхронные операции, такие как колбеки таймеров и событий.
Когда JavaScript выполняет код, все синхронные операции помещаются в очередь. Когда очередь становится пустой, Event loop проверяет, есть ли в очереди асинхронные операции. Если есть, они выполняются в порядке их добавления в очередь.
В чём разница между call и apply?
Методы call() и apply() используются для вызова функции с заданным значением this, а также для передачи аргументов в функцию. Основная разница между ними заключается в способе передачи аргументов:
Метод call() принимает список аргументов, переданных в функцию через запятую.
Метод apply() принимает массив аргументов, переданных в функцию.
Что такое псевдоклассы в CSS?
В CSS псевдоклассы используются для описания стилей элементов, находящихся в особых состояниях. Псевдоклассы можно использовать совместно с CSS-селекторами для настройки внешнего вида элементов на основе их состояний.
В чем разница между следующими видами позиционирования элементов: относительное, фиксированное, абсолютное, статическое?
-
Относительное позиционирование – это когда элемент смещается относительно его положения, задаваемого по умолчанию.
-
Фиксированное позиционирование – когда настраивают положение элемента, ориентируясь на края окна браузера.
-
Абсолютное позиционирование – это размещение элемента относительно ближайшего позиционированного родительского элемента. Именно там, где указано разработчиком.
-
Статическое позиционирование – это режим позиционирования по умолчанию, при использовании которого элементы выводятся в порядке, указанном в документе.
Чем отличаются PUT- и POST-запросы?
PUT-запросы приводят к замене целевого ресурса на данные, передаваемые в запросе. Его можно использовать для обновления содержимого существующего ресурса или для создания нового ресурса.
POST-запросы приводят к специфической для ресурса обработке данных, передаваемых в запросе. Их можно использовать для выполнения различных действий. В том числе, для создания новых ресурсов, для выгрузки файлов на сервер, для отправки форм.
PUT-запросы являются идемпотентными, а POST-запросы – нет.
В чём отличия технологии Long Polling, протокола WebSocket и событий, генерируемых сервером?
-
Технология Long Polling применяется при взаимодействии клиентских и серверных систем. Клиент отправляет серверу запрос, ответ на него поступает, когда в распоряжении сервера оказываются данные, запрошенные клиентом. После этого клиент выполняет новый запрос.
-
Протокол WebSocket позволяет устанавливать долгоживущие двусторонние соединения между клиентом и сервером.
-
В основе событий, генерируемых сервером, лежит использование долгоживущего HTTP-соединения, которое используется для отправки клиенту новых данных по инициативе сервера.
Как можно оптимизировать загрузку внешних ресурсов на странице?
Использовать кэширование, ленивую загрузку (lazy-loading), поддомены. Если используется HTTP/1.1, для HTTP/2, то это неактуально. Можно оптимизировать сборку JS-кода, минифицировать, использовать CDN, gzip-сжатие, css- и svg-спрайты, настроить кэширование.
Что такое прогрессивная отрисовка?
Такие вопросы на собеседовании для фронтенд-разработчика тоже могут встретиться.
Прогрессивная отрисовка – это метод веб-разработки, который позволяет поэтапно отображать содержимое веб-страницы по мере его загрузки. Сначала отображается минимальное количество информации, а затем дополнительные элементы. Детали добавляются по мере загрузки страницы.
Этот подход помогает ускорить начало взаимодействовать пользователя с сайтом – не приходится ждать полной загрузки страницы. Еще прогрессивная отрисовка позволяет снизить объем передаваемых данных и ускорить время отклика сервера.
Что такое «трехстороннее рукопожатие»?
А вот и вопрос из сферы безопасности.
Трехстороннее рукопожатие (Triple Handshake) – это проблема безопасности в компьютерных сетях, которая возникает при использовании SSL/TLS-соединений.
В процессе установки безопасного соединения SSL/TLS между клиентом и сервером происходит обмен сообщениями, который состоит из трех шагов (трех рукопожатий:
-
Клиент отправляет серверу сообщение SYN с произвольным начальным номером (seq).
-
Сервер отправляет клиенту сообщение SYN-ACK, подтверждающее получение сообщения SYN и содержащее свой собственный произвольный начальный номер (seq) и номер последовательности подтверждения (ack), который равен начальному номеру клиента +1.
-
Клиент отправляет серверу сообщение ACK с номером подтверждения, который равен начальному номеру сервера +1.
Проблема Triple Handshake возникает, когда злоумышленник нарушает правильный порядок шагов рукопожатия, вставляя свой сервер между клиентом и настоящим сервером. В этом случае злоумышленник может получить доступ к конфиденциальной информации, передаваемой между клиентом и сервером.
Чтобы избежать проблемы Triple Handshake, необходимо использовать проверенные и безопасные протоколы SSL/TLS и устанавливать соединение только с доверенными серверами.
Что такое NaN?
Это специальное значение в JavaScript, которое означает «не число» (Not-a-Number).
Возможные причины, по которым значение становится NaN:
-
Попытка выполнить математическую операцию с нечисловым значением.
-
Попытка выполнить математическую операцию, результат которой не может быть представлен числом. Например, деление нуля на ноль или вычисление квадратного корня из отрицательного числа.
-
Преобразование строки в число, если строка не является валидным числом.
Значение NaN имеет интересное свойство: оно не равно ни одному другому значению, включая само себя. Поэтому существует специальная функция isNaN(), которая позволяет проверить, является ли значение NaN.
Практические задачи для frontend junior
Задача 1. Реализовать методы, которые в процессе выполнения строки (2).plus(3).minus(1) дали бы на выходе 4.
Ответ:
Поскольку, мы работаем с числами, надо расширить прототип Number новыми методами.
Number.prototype.plus = function (value) {
return this + value;
}
Number.prototype.minus = function (value) {
return this - value;
}
Число два будет доступно через this в функции plus. Из нее мы возвращаем результат сложения числа, на которое указывает this и числа, переданного в качестве аргумента. Аналогично для minus.
Задача 2. Можно ли из js менять значения в before, after?
Ответ:
Нет, единственное что мы можем — это удалить класс, у которого указаны before или after, либо наоборот добавить.
Практические задачи для frontend middle
Задача 1. Каким образом можно обойтись без промисов?
Ответ:
По старинке, вводили переменную-счетчик и как-только наступало окончание очередного асинхронного действия, сравнивали переменную с общем количеством.
Задача 2. Объяснить, в какой последовательности выведутся цифры и почему так.
console.log(1);
setTimeout(function() {
console.log(2);
}, 0)
console.log(3);
1, 3, 2. Так как, хоть js и асинхронен, но внутри него есть очередь выполнения и setTimeout, и setInterval. Если им указан 0, помещают вызов функции в конец очереди.
Задача 3. Как подключить js, css? Плюсы, минусы разных способов?
Ответ:
Можно с помощью тегов
<script></script>
<style></style>
прямо на странице или
<script src="script.js"><script>
<link rel="stylesheet" href="/css/style.css">
подключаем из внешних файлов.
Минус подключения внешних файлов заключается в том, что для их закачки открываются дополнительные соединения. Может случиться так, что мы не сможем закачать, а если это еще и JS-файл, подключенный где-то в начале, то мы рискуем показать пользователю пустую страницу.
Размещение стилей и скриптов в самом документе, в этом плане, надежнее. Но при этом скрипты и стили совершенно не кэшируются.
