Автор статьи, перевод которой мы сегодня публикуем, приводит 15 вопросов, которые задавали на собеседованиях ему, и которые он задавал соискателям на должности фронтенд-разработчиков сам.
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) }
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. В каких состояниях может пребывать промис?
Промис может пребывать в одном из трёх состояний:
- Исполнено (fulfilled) — операция, связанная с промисом, завершена успешно.
- Отклонено (rejected) — операция, связанная с промисом, завершена с ошибкой.
- Ожидание (pending) — промис находится в состоянии ожидания, то есть, о нём нельзя сказать, что он завершён успешно или с ошибкой.
14. Что такое поднятие переменных и функций в JavaScript?
Поднятие переменных и функций (hoisting) — это перемещение их объявлений в верхнюю часть их области видимости (глобальной области видимости или области видимости функции).
15. Какие значения в JavaScript являются ложными?
В JavaScript ложными являются значения, которые, при преобразовании их к логическому типу, становятся значениями false. Это — следующие значения:
- ''
- 0
- null
- undefined
- NaN
- false
- -0
- 0n // значения типа BigInt, при преобразовании их к логическому типу, ведут себя так же, как значения типа Number
Итоги
Вопросы, которыми я с вами поделился, задавали на собеседованиях мне. Я задавал их на собеседованиях другим разработчикам. Подобные вопросы, дополненные практическими заданиями, это — хороший способ проверки знаний кандидата на должность фронтенд-программиста.
Я думаю, что для подготовки к фронтенд-собеседованию стоит разобрать гораздо больше вопросов по JavaScript, чем приведено в этом материале. Разбор вопросов по TypeScript тоже может оказаться очень кстати.
Если вы заявляете в резюме о том, что знакомы с каким-то фронтенд-фреймворком, это значит, что вам стоит подготовиться и к тому, что вам зададут вопросы на знание этого фреймворка.
Какие вопросы на собеседованиях по фронтенду задавали вам?
![Фото [Перевод] Б/У ThinkPad может быть лучше, чем новый дешёвый ноутбук](http://orion-int.ru/wp-content/uploads/2024/04/perevod-b-u-thinkpad-mozhet-byt-luchshe-chem-novyj-deshyovyj-noutbuk-390x220.png)
