company_banner

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

Автор оригинала: Daniel Anderson
  • Перевод
Автор статьи, перевод которой мы сегодня публикуем, приводит 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) {
  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 тоже может оказаться очень кстати.

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

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



RUVDS.com
VDS/VPS-хостинг. Скидка 10% по коду HABR

Комментарии 26

    +2

    А как же вопросы про js?!

      +6
      По-моему, уровень фронтендера можно проверить по реакции на ответы на эти вопросы.
        +11
        Тут конечно много к чему можно придраться, но
        > 8. Чем отличаются PUT- и POST-запросы?
        Ну вы хоть думайте, прежде чем такое писать. Это просто разные методы запроса. Все. Конец.
        Никаких «этот только обновляет данные», «этот идемпотентный».
        Можно сделать удаление данных на PUT и добавление на DELETE. Это лишь реализация.
          +3
          Да, почему-то тоже резануло. Это всего лишь рекомендация, договорённость. А сделать можно все, что угодно. Создание на Delete — да почему бы и нет
            +1
            Лично я на собеседованиях именно Ваш ответ засчитаю как верный, а если кандидат не понимает, то всегда объясню, что это всего лишь вопросы семантики. Так что, вопрос хороший :)
              0
              Ответ нормальный, это правда, но не вся.

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

              Автор ожидает услышать разницу в использовании. Вот этого слова не хватает в вопросе — «использовании», тогда и ответ хорошо подходит. А так, можно ответить по разному, и эти ответы могут считаться как правильные, в зависимости от ожиданий задающего вопрос человека.

              Как гласит поговорка: правильно поставленный вопрос — это уже половина ответа.


              О разности POST и PUT в RFC:
              tools.ietf.org/html/rfc7231#section-4.3.4
              The fundamental difference between the POST and PUT methods is
              highlighted by the different intent for the enclosed representation.
              The target resource in a POST request is intended to handle the
              enclosed representation according to the resource's own semantics,
              whereas the enclosed representation in a PUT request is defined as
              replacing the state of the target resource. Hence, the intent of PUT
              is idempotent and visible to intermediaries, even though the exact
              effect is only known by the origin server.


              Также POST используется для вызова Controller (REST, 4-й Resource Archetype).
                0
                Ну такое себе. С таким же успехом можно спросить в чем разница между input и textarea, ожидая что кандидат расскажет разницу в синтаксисе биндинга значения в derbyjs. Ну а чё, «я так вижу».
                –1
                Можно сделать удаление данных на PUT. Можно сделать #define TRUE FALSE. А можно почитать RFC 2616 где сказано, что GET, HEAD, PUT and DELETE по стандарту должны быть идемпотентны. Не спорю, на бэкенде можно что угодно понаписать, только зачем это фронтендеру?
                    0
                    RFC7231 что-то объявил про идемпотентность? Мелочь какая, это всего лишь стандарт на HTTP-протокол, который используешь, ему можно не следовать. Удиви лучше всех, кто потом в твой проект заглянет и будет разбираться, почему всё взорвалось.
                      0
                      Да вашу ж налево. Где-то было в вопросе про протокол?
                      Вопрос был «чем отличаются» — отличаются строчкой method. Все.

                      Вы своими ответами с углублениями в протоколы докатитесь до физического уровня. А че, там напряжение будет разное в PUT и POST в разные моменты времени.
                        0
                        Ну и где по вашему определяется, что есть POST запрос, а что есть PUT запрос? На что общее должны опираться фронт и бек, когда используют эти термины?
                      0
                      Ура, хоть кто-то это написал. Ведь разница между «этот запрос идемпотентный» и «его реализация на сервере по стандарту должна быть идемпотентной» достаточно большая.
                        0
                        Можно еще коды ошибок креативно использовать, код 200 возвращать при ошибке сервера, а 500 при успехе. А что, ведь это тоже всего лишь часть стандарта на HTTP-протокол.
                        0

                        Так же как с id и классами, может быть несколько элементов с одинаковыми id и их без проблем можно получить через селекторные запросы. И класс может быть представлен всего одним элементом. Это всего лишь соглашение.

                        0

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

                          0

                          Вы реально такие вопросы задаете?! Ну просто они только для совсем джунов годятся

                            0

                            Когда-то ещё студентом читал книжку по html/css и там был момент, когда автор рассказывает в чем отличие тега < b > от < strong > и говорит, что такое обязательно! спросят на собеседовании.
                            На первых собеседованиях, конечно же, ждал такого вопроса :)))

                              0
                              Скорее это вопросы для позиции мидла среди джунов. Если это первая вакансия фронта для опрашиваемого человека, то вполне можно эти вопросы задать. Но для фронта с опытом (даже с однолетним) минимум половина этих вопросов — это трата времени. Учитывая, сколько приходится порой прособеседовать кандидатов, вопросик про разницу между span и div влетит в серьезную копеечку.
                                +3

                                я думаю, что автор сам придумал эти вопросы, чтобы написать еще одну мусорную статью на медиуме.

                                  0

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

                                    0
                                    Так и не понял автору нужно подтянуть английский или русский? Фраза «Имена классов (class) не являются уникальными.» мне понятно, но коряво и non sense/;. «псевдоклассы используются для описания стилей элементов» в оригинале «used to define the special state of an element», что корректней было бы перевести: задают особые/специальные состояния для элементов DOM. Дальше читал оригинал
                                      0

                                      Мне кажется что эти вопросы не показывают знаний как фронтендера, как верстальщика возможно. Всю статью можно было сократить в 2 линки в итоге.

                                        0
                                        Если я ответил на 14 вопросов? Меня возьмут? И куда отправлять резюме?
                                          0

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

                                            0

                                            Ложным в JavaScript является значение false и все. То о чем идёт речь в посте — скорее звучит как "квази ложные" или falsely.

                                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                            Самое читаемое