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

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

jkp5yktq6fsxai79c4qjmud_moa.jpeg

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


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

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


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


Элементы

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

Надо отметить, что нельзя помещать блочные элементы в строчные. Вот пример, в котором показано, кроме прочего, неправильное размещение блочного элемента внутри строчного (это — фрагмент

I'm illegal
, размещённый внутри элемента ):

HiI'm the start of the span element
I'm illegal
I'm the end of the span
Bye I'm the end of the div


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


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

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


  
  
  
  
  


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


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

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

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

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


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

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


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


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

Вот пример:

/* 
   Любой элемент , на который пользователь наведёт указатель мыши, будет окрашен в цвет green. 
*/
a:hover {
  color: green;
}
/* Выбирает все посещённые элементы  и окрашивает их в цвет 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 тоже может оказаться очень кстати.

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

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

oug5kh6sjydt9llengsiebnp40w.png

3piw1j3wd_cgmzq9sefgferaumu.png

© Habrahabr.ru