[Перевод] Готовимся к собеседованию по фронтенду: 15 вопросов
Автор статьи, перевод которой мы сегодня публикуем, приводит 15 вопросов, которые задавали на собеседованиях ему, и которые он задавал соискателям на должности фронтенд-разработчиков сам.
1. Что такое DOM?
DOM (Document Object Model, объектная модель документа) — это программный интерфейс к HTML-документам. Этот интерфейс позволяет воздействовать на документ из скриптов, меняя его оформление, стили, содержимое. В DOM документ представлен в виде дерева узлов.
2. Какая разница между элементами и ?
— это блочный (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. В каких состояниях может пребывать промис?
Промис может пребывать в одном из трёх состояний:
- Исполнено (fulfilled) — операция, связанная с промисом, завершена успешно.
- Отклонено (rejected) — операция, связанная с промисом, завершена с ошибкой.
- Ожидание (pending) — промис находится в состоянии ожидания, то есть, о нём нельзя сказать, что он завершён успешно или с ошибкой.
14. Что такое поднятие переменных и функций в JavaScript?
Поднятие переменных и функций (hoisting) — это перемещение их объявлений в верхнюю часть их области видимости (глобальной области видимости или области видимости функции).
15. Какие значения в JavaScript являются ложными?
В JavaScript ложными являются значения, которые, при преобразовании их к логическому типу, становятся значениями false. Это — следующие значения:
- ''
- 0
- null
- undefined
- NaN
- false
- -0
- 0n // значения типа BigInt, при преобразовании их к логическому типу, ведут себя так же, как значения типа Number
Итоги
Вопросы, которыми я с вами поделился, задавали на собеседованиях мне. Я задавал их на собеседованиях другим разработчикам. Подобные вопросы, дополненные практическими заданиями, это — хороший способ проверки знаний кандидата на должность фронтенд-программиста.
Я думаю, что для подготовки к фронтенд-собеседованию стоит разобрать гораздо больше вопросов по JavaScript, чем приведено в этом материале. Разбор вопросов по TypeScript тоже может оказаться очень кстати.
Если вы заявляете в резюме о том, что знакомы с каким-то фронтенд-фреймворком, это значит, что вам стоит подготовиться и к тому, что вам зададут вопросы на знание этого фреймворка.
Какие вопросы на собеседованиях по фронтенду задавали вам?
— это строчный (inline) элемент.- — это блочный (block) элемент.
Элементынужно использовать для оформления разделов документа. А элементы— в роли контейнеров для небольших объёмов текста, для изображений и других подобных элементов страниц.Надо отметить, что нельзя помещать блочные элементы в строчные. Вот пример, в котором показано, кроме прочего, неправильное размещение блочного элемента внутри строчного (это — фрагмент
):HiI'm the start of the span elementI'm illegalI'm the end of the span Bye I'm the end of the div3. Что такое мета-теги?
Мета-теги — это теги, находящиеся в теге страницыи описывающие содержимое страницы. Мета-теги не выводятся на странице. Они имеются лишь в её коде.Их основная задача заключается в том, чтобы кратко описывать содержимое страниц поисковым системам. Вот пример:
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. В каких состояниях может пребывать промис?
Промис может пребывать в одном из трёх состояний:- Исполнено (fulfilled) — операция, связанная с промисом, завершена успешно.
- Отклонено (rejected) — операция, связанная с промисом, завершена с ошибкой.
- Ожидание (pending) — промис находится в состоянии ожидания, то есть, о нём нельзя сказать, что он завершён успешно или с ошибкой.
14. Что такое поднятие переменных и функций в JavaScript?
Поднятие переменных и функций (hoisting) — это перемещение их объявлений в верхнюю часть их области видимости (глобальной области видимости или области видимости функции).15. Какие значения в JavaScript являются ложными?
В JavaScript ложными являются значения, которые, при преобразовании их к логическому типу, становятся значениямиfalse. Это — следующие значения:- ''
- 0
- null
- undefined
- NaN
- false
- -0
- 0n // значения типа BigInt, при преобразовании их к логическому типу, ведут себя так же, как значения типа Number
Итоги
Вопросы, которыми я с вами поделился, задавали на собеседованиях мне. Я задавал их на собеседованиях другим разработчикам. Подобные вопросы, дополненные практическими заданиями, это — хороший способ проверки знаний кандидата на должность фронтенд-программиста.Я думаю, что для подготовки к фронтенд-собеседованию стоит разобрать гораздо больше вопросов по JavaScript, чем приведено в этом материале. Разбор вопросов по TypeScript тоже может оказаться очень кстати.
Если вы заявляете в резюме о том, что знакомы с каким-то фронтенд-фреймворком, это значит, что вам стоит подготовиться и к тому, что вам зададут вопросы на знание этого фреймворка.
Какие вопросы на собеседованиях по фронтенду задавали вам?
