30 вопросов на собеседовании фронтенд разработчика

Казалось бы, вопросы на собеседовании frontend разработчика Junior не должны отличаться от стандартных задачек с IT-сайтов. Даже мы приводили 5 простых тестовых заданий для младшего фронтенд-программиста.

Но складывается впечатление, что работодатели с каждым годом придумывают больше заковыристых вопросов, чтобы поставить кандидата в тупик. Такие мы рассмотрим в том числе.

Держите популярные вопросы с frontend интервью.

1. Разница между let, var и const

let, var и const — это ключевые слова, используемые в JavaScript для объявления переменных.

var долгое время был основным способом объявления переменных в JavaScript до появления let и const. var имеет область видимости функции и может быть изменен в любом месте в этой функции.

Пример:

			function myFunction() {
  var x = 1;
  if (true) {
    var x = 2; // переназначение переменной x
    console.log(x); // 2
  }
  console.log(x); // 2
}
		

let и const были добавлены в стандарт ECMAScript 6 (ES6) и имеют блочную область видимости. let может быть изменен, но const не может.

Примеры:

			// пример с let
function myFunction() {
  let x = 1;
  if (true) {
    let x = 2; // создание новой переменной x
    console.log(x); // 2
  }
  console.log(x); // 1
}

// пример с const
const PI = 3.14;
PI = 3.14159; // TypeError: Assignment to constant variable.
		

Используйте let, если вы собираетесь изменять значение переменной, и const, если не собираетесь. Используйте var, если вам нужно поддерживать совместимость со старыми браузерами или если вы хотите использовать его особенности, такие как функциональная область видимости.

2. Разница между cookie, sessionStorage и localStorage

Вот он, родной и горячо любимый HTML.

cookie, sessionStorage и localStorage — это технологии для хранения данных на стороне клиента в браузере. Однако, у них есть различия в использовании и хранении данных.

cookie — небольшой фрагмент данных, который отправляется сервером в браузер, а затем сохраняется в браузере клиента. Cookie могут храниться в течение определённого периода времени, определяемого сервером. Они используются для сохранения пользовательских настроек, данных авторизации и другой информации о пользователях.

Пример:

			document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
		

sessionStorage — объект, который позволяет сохранять данные в браузере на время сессии, т.е. пока вкладка браузера открыта. Данные сохраняются в виде пары ключ-значение, и они могут быть использованы для сохранения состояния приложения или другой информации, которая должна быть доступна только в течение сессии.

Пример:

			sessionStorage.setItem('username', 'John');
console.log(sessionStorage.getItem('username')); // выводит "John"
		

localStorage — объект, который позволяет сохранять данные в браузере на неопределенный период времени, т.е. данные будут доступны даже после закрытия браузера и перезагрузки компьютера. Данные также сохраняются в виде пары ключ-значение и могут быть использованы для сохранения состояния приложения или другой информации, которая должна быть доступна в любое время.

Пример:

			localStorage.setItem('username', 'John');
console.log(localStorage.getItem('username')); // выводит "John"
		

В целом, разница между cookie, sessionStorage и localStorage заключается в их жизненном цикле и времени жизни, а также в том, как они могут быть использованы в приложениях.

3. Какая технология наиболее популярна сейчас и точно будет популярна ещё несколько лет?

Резкий скачок от чисто технических вопросов на собеседовании Junior frontend к чисто философским, не так ли? Но сегодня это нормальная практика, и ей не стоит удивляться.

Сразу хочется подчеркнуть, что здесь нет единого правильного варианта ответа, ведь фронт-енд в последние годы стал очень многогранен, обзавёлся кучей прогрессивных библиотек и фреймворков. Поэтому давайте поразмышляем в несколько творческом ключе.

Сейчас в веб-разработке наиболее популярным языком является JavaScript и его фреймворки, такие как React, Angular и Vue.js. JavaScript используется для создания интерактивных пользовательских интерфейсов, а также для создания бэкенд-серверов с помощью Node.js.

Не стоит забывать и о набирающих популярность технологиях, которые связаны с искусственным интеллектом, машинным обучением и анализом данных. Скорее всего, они также будут иметь значительное влияние на веб-разработку в будущем. В частности, библиотеки и фреймворки для визуализации данных, такие как D3.js и Chart.js, станут очень популярны в создении интерактивных графиков и диаграмм на веб-сайтах.

4. Напишите простую функцию, чтобы проверить, является ли число целым

Здесь всё просто:

			function isInteger(num) {
  return num % 1 === 0;
}
		

Эта функция принимает число в качестве аргумента и возвращает true, если число является целым, и false, если число имеет дробную часть.

Например:

			console.log(isInteger(4)); // true
console.log(isInteger(4.2)); // false
console.log(isInteger(-3)); // true
		

5. Что такое прогрессивная отрисовка?

Да, некоторые вопросы для фронтенд разработчика могут быть даже такими.

Прогрессивная отрисовка — это метод веб-разработки, который позволяет поэтапно отображать содержимое веб-страницы по мере его загрузки. Сначала отображается минимальное количество информации, а затем дополнительные элементы и детали добавляются по мере загрузки страницы.

Этот подход особенно полезен для улучшения пользовательского опыта и снижения времени загрузки страницы. Пользователи могут начать взаимодействовать с сайтом намного быстрее, чем если бы они должны были ждать, пока вся страница будет загружена полностью.

Кроме того, прогрессивная отрисовка также может быть полезна для оптимизации производительности, поскольку она позволяет снизить объем передаваемых данных и ускорить время отклика сервера.

Примеры технологий, которые позволяют использовать прогрессивную отрисовку, включают в себя постраничную подгрузку контента, ленивую загрузку изображений и использование CSS-анимации для плавного отображения элементов страницы.

6. На что стоит обратить внимание при разработке мультиязычных сайтов?

При разработке мультиязычных сайтов необходимо обратить внимание на следующие аспекты:

1. Выбор подходящей системы управления контентом (CMS). Некоторые CMS, такие как WordPress и Drupal, предоставляют встроенную поддержку мультиязычности, что может значительно упростить разработку и управление мультиязычными сайтами.
2. Кодирование текста и использование правильных языковых символов. Кодировка должна соответствовать требованиям языков, на которых будет отображаться сайт. Например, для языков, использующих кириллицу, должна быть выбрана кодировка UTF-8.
3. Организация контента на сайте. Необходимо разработать систему, которая позволит организовать контент на сайте таким образом, чтобы пользователи могли легко найти информацию на нужном им языке. Для этого можно использовать разделение контента на языковые версии или использовать переключатели языков.
4. Локализация. При переводе текста на другой язык необходимо учитывать культурные особенности языка и местные нормы и стандарты. Кроме того, может потребоваться локализация форматов дат, валют и других данных, которые зависят от конкретного региона.
5. Тестирование и отладка. Необходимо тщательно протестировать все языковые версии сайта, чтобы убедиться, что контент отображается корректно, а функциональность работает правильно на всех языках.
6. SEO-оптимизация для каждого языка. Для каждой языковой версии сайта необходимо провести SEO-анализ и оптимизировать контент, мета-теги и другие аспекты для местных поисковых систем и языковых запросов пользователей.Например, таким бы было оформление sitemap.xml, будь у Tproger английская версия:

			<url>
    <loc>https://tproger.ru</loc>
    <xhtml:link rel="alternate" hreflang="en-ru" href="https://tproger.ru/en/"/>
    <xhtml:link rel="alternate" hreflang="ru-ru" href="https://tproger"/>
</url>
		

Подробнее о мультиязычной настройке Sitemap можно почитать в документации Google.

Учитывая эти аспекты, можно разработать качественный мультиязычный сайт, который будет удобен и понятен для пользователей на разных языках.

7. Написать код для получения текущего URL

В JavaScript можно получить текущий URL страницы, используя свойство window.location.href:

			const currentUrl = window.location.href;
console.log(currentUrl); // выведет текущий URL в консоль
		

Подобные вопросы на собеседовании frontend разработчика звучат нечасто, но всё же ответ должен быть полным.

Итак, это свойство возвращает текущий URL, включая протокол, имя хоста, порт (если он есть), путь и параметры запроса. Если необходимо получить только определенную часть URL (например, только путь), можно использовать другие свойства объекта window.location, такие как pathname или search.

8. Разница между <script>, <script async> и <script defer>

Тег <script> используется для загрузки и выполнения JavaScript-кода на веб-странице. Тег <script> может иметь атрибуты async и defer, которые позволяют задать способ загрузки скрипта.

<script>  будет загружаться и выполняться синхронно, т.е. парсер HTML-документа остановится на этом теге, выполнит скрипт, и только после этого продолжит загрузку страницы.

<script async> будет загружаться асинхронно, т.е. парсер HTML-документа продолжит загрузку страницы без ожидания загрузки и выполнения скрипта. Как только скрипт будет загружен, он начнет выполняться, даже если страница еще не полностью загружена.

<script defer> также будет загружаться асинхронно, но его выполнение будет отложено до того момента, когда страница будет полностью загружена.

Примеры:

			<!-- скрипт будет загружен и выполнен синхронно -->
<script src="script.js"></script>

<!-- скрипт будет загружен асинхронно -->
<script async src="script.js"></script>

<!-- скрипт будет загружен асинхронно и выполнен после полной загрузки страницы -->
<script defer src="script.js"></script>
		

Важно отметить, что использование атрибутов async и defer может повлиять на порядок выполнения скриптов на странице, поэтому необходимо тщательно планировать их использование. Подобные развёрнутые ответы на вопросы на собеседовании фронтенд разработчика дадут вам значительное преимущество.

9. Что такое REST и RESTful API?

REST (Representational State Transfer) — это архитектурный стиль, используемый при проектировании распределенных систем. Он был описан в диссертации Роя Филдинга в 2000 году и является основой для создания RESTful API.

RESTful API — это веб-сервис, который использует протокол HTTP для обмена данными. Он предоставляет возможность получать, создавать, обновлять и удалять данные на удаленном сервере, используя стандартные HTTP-методы (GET, POST, PUT, DELETE и т. д.).

RESTful API использует ресурсы (например, товары, пользователи, заказы) и URI (Uniform Resource Identifier) для доступа к этим ресурсам. Клиент отправляет запросы на сервер, указывая URI и метод HTTP, а сервер возвращает ответ, который может содержать данные в различных форматах (например, JSON или XML).

Принципы RESTful API:

1. Клиент-серверная архитектура: сервер и клиент независимы друг от друга, что позволяет развивать их независимо.
2. Отсутствие состояния (stateless): каждый запрос клиента должен содержать всю необходимую информацию для его обработки, без сохранения состояния на сервере.
3. Кэширование: клиенты могут кэшировать ответы сервера, чтобы уменьшить количество запросов.
4. Единообразие интерфейса: единообразный интерфейс между клиентом и сервером упрощает взаимодействие и увеличивает его надежность.
5. Слои: клиент не должен знать о слоях на сервере, которые обрабатывают запросы.

RESTful API является широко используемым в веб-разработке и предоставляет удобный и гибкий способ обмена данными между сервером и клиентом.

10. Разница между «сбросом» и «нормализацией» CSS

Заметили, что вопросы Junior frontend разработчику часто включают в себя какие-то сравнения? Это неспроста. Интервьюеры специально «гоняют» по отличиям, чтобы одним махом понять вашу осведомлённость во всех сравниваемых элементах.

Ответить на этот фронтенд вопрос несложно.

Сброс CSS и нормализация CSS — это два разных подхода к обнулению стилей веб-страницы.

Сброс CSS — это процесс обнуления стилей, чтобы убрать браузерные стили по умолчанию, которые могут отличаться от одного браузера к другому. Цель сброса CSS — создать «чистую» страницу, на которой все элементы имеют одинаковый вид в разных браузерах. Пример кода:

			/* сброс CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
		

Нормализация CSS — это процесс создания единообразных стилей для разных элементов, чтобы веб-страница выглядела одинаково во всех браузерах. В отличие от сброса CSS, нормализация CSS сохраняет некоторые стили по умолчанию браузера, но при этом пытается сделать их единообразными. Пример:

			/* нормализация CSS */
html {
  font-size: 62.5%;
}
body {
  font-size: 1.6rem;
  line-height: 1.5;
  font-family: Arial, sans-serif;
}
		

Оба подхода могут использоваться в зависимости от нужд проекта. Если вы хотите создать полностью уникальный дизайн, то возможно вам нужен сброс CSS. Если же вы хотите сохранить некоторые стили браузера, но при этом сделать веб-страницу более единообразной, то нормализация CSS может быть более подходящим вариантом.

11. Что такое «трёхстороннее рукопожатие»?

Медленно но уверенно вопросы для frontend разработчика перетекли в сферу безопасности. 

Трехстороннее рукопожатие (Triple Handshake) — это проблема безопасности в компьютерных сетях, которая возникает при использовании SSL/TLS-соединений.

В процессе установки безопасного соединения SSL/TLS между клиентом и сервером происходит обмен сообщениями, который состоит из трех шагов (трехстороннее рукопожатие):

1. Клиент отправляет серверу сообщение SYN с произвольным начальным номером (seq).
2. Сервер отправляет клиенту сообщение SYN-ACK, подтверждающее получение сообщения SYN и содержащее свой собственный произвольный начальный номер (seq) и номер последовательности подтверждения (ack), который равен начальному номеру клиента +1.
3. Клиент отправляет серверу сообщение ACK с номером подтверждения, который равен начальному номеру сервера +1.

Проблема Triple Handshake возникает, когда злоумышленник нарушает правильный порядок шагов рукопожатия, вставляя свой сервер между клиентом и настоящим сервером. В этом случае злоумышленник может получить доступ к конфиденциальной информации, передаваемой между клиентом и сервером.

Чтобы избежать проблемы Triple Handshake, необходимо использовать проверенные и безопасные протоколы SSL/TLS и устанавливать соединение только с доверенными серверами.

12. Что такое NaN?

Это специальное значение в JavaScript, которое означает «не число» (Not-a-Number).

Возможные причины, по которым значение становится NaN:

• Попытка выполнить математическую операцию с нечисловым значением.
• Попытка выполнить математическую операцию, результат которой не может быть представлен числом, например деление нуля на ноль или вычисление квадратного корня из отрицательного числа.
• Преобразование строки в число, если строка не является валидным числом.

			let result1 = 10 / "hello"; // result1 будет равен NaN
let result2 = Math.sqrt(-1); // result2 будет равен NaN
let result3 = parseInt("hello"); // result3 будет равен NaN
		

Значение NaN имеет интересное свойство: оно не равно ни одному другому значению, включая само себя. Поэтому существует специальная функция isNaN(), которая позволяет проверить, является ли значение NaN:

			let result = isNaN(NaN); // result будет равен true
let result2 = isNaN("hello"); // result2 будет равен true, потому что строка "hello" не может быть преобразована в число
let result3 = isNaN(10); // result3 будет равен false, потому что 10 - это число
		

13. Как реализовать отложенную загрузку изображений?

Да, такие вопросы фронтенд разработчик должен щёлкать, как семечки. 

Отложенная загрузка изображений — это способность страницы загружать изображения только тогда, когда они понадобятся пользователю. Это может ускорить время загрузки страницы и уменьшить использование данных. Есть несколько способов реализации отложенной загрузки изображений.

Lazy Loading — техника, которая позволяет отложить загрузку изображений, находящихся за пределами видимой области. Для этого можно использовать библиотеки, такие как Lazysizes или Intersection Observer API.

Атрибуты data- — Вы можете использовать атрибут data- вместе с атрибутом src, чтобы отложить загрузку изображения:

			<img data-src="path-to-image.jpg" alt="Alt text">
		

Затем вы можете использовать JavaScript, чтобы загрузить изображение, когда оно станет видимым:

			const img = document.querySelector('img');
img.setAttribute('src', img.getAttribute('data-src'));
		

Использование CSS для изменения размера изображения, уменьшения его качества или изменения его формата. Например, вы можете использовать свойство “background-image” для загрузки изображения как фон элемента:

			.element {
  background-image: url(path-to-image.jpg);
}
		

Это не полный список способов реализации отложенной загрузки изображений, и выбор конкретных методов зависит от требований проекта и целевой аудитории.

14. Что такое Event loop и как он работает?

это механизм в JavaScript, который позволяет выполнить асинхронный код и обрабатывать события, такие как клики мыши, нажатия клавиш и таймеры.

Event loop работает внутри JavaScript движка и состоит из двух основных фаз: фаза синхронизации и фаза выполнения задач. В фазе синхронизации обрабатываются синхронные операции, такие как выполнение кода и обработка событий, которые были помещены в очередь в прошлый цикл. В фазе выполнения задач обрабатываются асинхронные операции, такие как колбэки таймеров и событий.

Когда JavaScript выполняет код, все синхронные операции помещаются в очередь. Когда очередь становится пустой, Event loop проверяет, есть ли в очереди асинхронные операции. Если есть, они выполняются в порядке их добавления в очередь.

Например, если мы вызываем setTimeout с задержкой в 1 секунду, функция setTimeout помещает колбэк функцию в очередь и устанавливает таймер на 1 секунду. Когда таймер сработает, колбэк функция будет добавлена в очередь, и Event loop выполнит ее.

Важно понимать, что фаза выполнения задач может быть перервана фазой синхронизации. Например, если мы запускаем бесконечный цикл, который занимает все ресурсы процессора, JavaScript не сможет выполнить другие задачи, пока цикл не закончится.

Event loop является важным концептом в асинхронном программировании на JavaScript, поэтому важно понимать, как он работает, чтобы писать эффективный и предсказуемый асинхронный код.

15. В чём разница между .call и .apply?

Методы .call() и .apply() используются для вызова функции с заданным значением this, а также для передачи аргументов в функцию. Основная разница между ними заключается в способе передачи аргументов.

Метод .call() принимает список аргументов, переданных в функцию через запятую. В то же время, метод .apply() принимает массив аргументов, переданных в функцию.

Вот пример использования методов .call() и .apply():

			function greet(name, age) {
  console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}

greet.call(null, 'John', 30);
// выводит: Hello, my name is John and I am 30 years old.

greet.apply(null, ['Jane', 25]);
// выводит: Hello, my name is Jane and I am 25 years old.
		

В обоих случаях мы вызываем функцию greet() с this равным null. В первом случае мы передаем два аргумента в функцию через запятую, а во втором случае мы передаем массив из двух аргументов в функцию.

Понравился такой формат? Держите ещё 15 интересных вопросов к собеседованию фронтенд. Проверьте себя: пишите свои ответы в комментариях.

1. Как изменить цвет в svg файле? Назовите хотя бы один способ.
2. Как можно протестировать API-сервис?
3. Какие проблемы могут возникнуть при использовании атрибута «defer» для подключения скриптов?
4. Как можно реализовать адаптивное изображение, чтобы снизить нагрузку на сервер и ускорить загрузку страницы?
5. В каких случаях используются анонимные функции?
6. Что такое специфичность CSS-селекторов и как она работает?
7. Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5?
8. В чём различия между Long-Polling, Websockets и Server-Sent Events?
9. Какие преимущества/недостатки в использовании CSS препроцессоров?
10. Напишите цикл, который перебирает числа до 100, возвращая «Типичный» на числа кратные 3, «программист» на числа кратные 5 и «Типичный программист» на числа кратные 3 и 5.
11. В чём разница между == и ===?
12. Использовали ли вы систему сеток, и если да, то какую вы предпочитаете?
13. Для чего нужен doctype?
14. Опишите, как бы вы реализовали самый обычный слайдер.
15. Какие преимущества и недостатки у CSS и JavaScript анимаций?

Держите дорожную карту фронтенд-разработчика, которая также поможет эффективно подготовиться к вопросам на собеседовании Junior frontend.