Готовимся к собеседованию по фронтенду: 15 вопросов

в 17:00, , рубрики: css, html, javascript, Блог компании RUVDS.com, разработка, Разработка веб-сайтов

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

Готовимся к собеседованию по фронтенду: 15 вопросов - 1

1. Что такое DOM?

DOM (Document Object Model, объектная модель документа) — это программный интерфейс к HTML-документам. Этот интерфейс позволяет воздействовать на документ из скриптов, меняя его оформление, стили, содержимое. В DOM документ представлен в виде дерева узлов.

2. Какая разница между элементами <span> и <div>?

  • <span> — это строчный (inline) элемент.
  • <div> — это блочный (block) элемент.

Элементы <div> нужно использовать для оформления разделов документа. А элементы <span> — в роли контейнеров для небольших объёмов текста, для изображений и других подобных элементов страниц.

Надо отметить, что нельзя помещать блочные элементы в строчные. Вот пример, в котором показано, кроме прочего, неправильное размещение блочного элемента внутри строчного (это — фрагмент <div>I'm illegal</div>, размещённый внутри элемента <span>):

<div>Hi<span>I'm the start of the span element <div>I'm illegal</div> I'm the end of the span</span> Bye I'm the end of the div</div>

3. Что такое мета-теги?

Мета-теги — это теги, находящиеся в теге страницы <head> и описывающие содержимое страницы. Мета-теги не выводятся на странице. Они имеются лишь в её коде.

Их основная задача заключается в том, чтобы кратко описывать содержимое страниц поисковым системам. Вот пример:

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Description search engines use">
  <meta name="keywords" content="Keywords, of, your, page">
  <meta name="author" content="Me">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

4. Какая разница между селекторами идентификаторов и классов в CSS?

Идентификаторы (id) уникальны. У элемента может быть только один идентификатор. На странице может присутствовать лишь один элемент с конкретным идентификатором.

Имена классов (class) не являются уникальными. Один и тот же класс можно назначать множеству элементов. Элементу может быть назначено несколько классов.

Если некий стиль нужно применить к нескольким элементам страницы — эту задачу нужно решать с использованием классов.

5. Как пользоваться медиазапросами в CSS?

В медиазапросах используется правило @media, с помощью которого можно применять CSS-стили к различным типам содержимого. Медиазапросы могут использоваться и для настройки элементов страниц с учётом характеристик среды, в которой просматривают страницы.

/* Изменить фоновый цвет любого элемента <div> на "red" в том случае, если ширина окна браузера составляет 600px или меньше */
@media only screen and (max-width: 600px) {
  div {
    background-color: red;
  }
}

6. Что такое псевдоклассы в CSS?

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

Вот пример:

/* 
   Любой элемент <a>, на который пользователь наведёт указатель мыши, будет окрашен в цвет green. 
*/
a:hover {
  color: green;
}
/* Выбирает все посещённые элементы <a> и окрашивает их в цвет purple.*/
a:visited {
  color: purple;
}

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

7. Какая разница между следующими видами позиционирования элементов: относительное, фиксированное, абсолютное, статическое?

  • Относительное позиционирование — это когда элемент смещается относительно его положения, задаваемого по умолчанию.
  • Фиксированное позиционирование — это когда настраивают положение элемента, ориентируясь на края окна браузера.
  • Абсолютное позиционирование — это размещение элемента относительно ближайшего позиционированного родительского элемента, причём, именно там, где указано разработчиком.
  • Статическое позиционирование — это режим позиционирования, применяемый по умолчанию, при использовании которого элементы выводятся в том порядке, в котором они описаны в документе.

8. Чем отличаются PUT- и POST-запросы?

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

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

Ещё одно отличие между PUT- и POST-запросами заключается в том, что PUT-запросы являются идемпотентными, а POST-запросы — нет. То есть — если запрос, в котором передаются одни и те же данные, и который выполняется по одному и тому же URL, будет выполнен несколько раз, это равносильно однократному выполнению этого запроса. Многократное выполнение POST-запроса не эквивалентно его однократному выполнению. То есть — несколько таких запросов, например, могут привести к созданию нескольких объектов на сервере.

9. В чём отличия технологии Long Polling, протокола WebSocket и событий, генерируемых сервером?

  • Технология Long Polling применяется при взаимодействии клиентских и серверных систем. Клиент отправляет серверу запрос, ответ на который поступает тогда, когда в распоряжении сервера оказываются данные, запрошенные клиентом. После этого клиент выполняет новый запрос.
  • Протокол WebSocket позволяет устанавливать долгоживущие двусторонние соединения между клиентом и сервером.
  • В основе событий, генерируемых сервером, лежит использование долгоживущего HTTP-соединения, которое используется для отправки клиенту новых данных по инициативе сервера.

10. Чем отличаются куки-файлы, сессионное хранилище и локальное хранилище?

Локальное хранилище, как можно понять из его названия, это место, которое браузеры могут использовать для локального хранения данных. В нём может храниться до 10 Мб данных. Сессионное хранилище — это разновидность локального хранилища, которое привязано к сессии и удаляется после её завершения. В сессионном хранилище может храниться до 5 Мб данных.

Куки-файлы используются для хранения небольших объёмов данных, не превышающих 4 Кб. Ими может пользоваться браузер, их может запрашивать у браузера сервер.

11. Что такое CORS?

CORS (Cross-Origin Resource Sharing, совместное использование ресурсов между разными источниками) — это браузерный механизм, который позволяет предоставлять страницам доступ к ресурсам, расположенным за пределами некоего домена. Это расширяет возможности страниц и добавляет гибкости политике одинакового источника (same-origin policy).

12. Что такое промис?

Промисы — это объекты, которые используются в JavaScript при выполнении асинхронных операций. Они упрощают работу с асинхронными операциями и дают более удобные механизмы обработки ошибок, чем коллбэки и события.

13. В каких состояниях может пребывать промис?

Промис может пребывать в одном из трёх состояний:

  1. Исполнено (fulfilled) — операция, связанная с промисом, завершена успешно.
  2. Отклонено (rejected) — операция, связанная с промисом, завершена с ошибкой.
  3. Ожидание (pending) — промис находится в состоянии ожидания, то есть, о нём нельзя сказать, что он завершён успешно или с ошибкой.

14. Что такое поднятие переменных и функций в JavaScript?

Поднятие переменных и функций (hoisting) — это перемещение их объявлений в верхнюю часть их области видимости (глобальной области видимости или области видимости функции).

15. Какие значения в JavaScript являются ложными?

В JavaScript ложными являются значения, которые, при преобразовании их к логическому типу, становятся значениями false. Это — следующие значения:

  • '' 
  • null
  • undefined
  • NaN
  • false
  • -0
  • 0n // значения типа BigInt, при преобразовании их к логическому типу, ведут себя так же, как значения типа Number

Итоги

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

Я думаю, что для подготовки к фронтенд-собеседованию стоит разобрать гораздо больше вопросов по JavaScript, чем приведено в этом материале. Разбор вопросов по TypeScript тоже может оказаться очень кстати.

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

Какие вопросы на собеседованиях по фронтенду задавали вам?

Готовимся к собеседованию по фронтенду: 15 вопросов - 2

Готовимся к собеседованию по фронтенду: 15 вопросов - 3

Автор: ru_vds

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js